Make divs with a same height fluid – css only

I’m working on the new website of I’m a front end integrator on this project. I am not the graphic designer on it. I had to resolve some common issues which, wierdly, I never had to resolve before. 

I’ve learned a lot and here is another memo post for me to remember, and to to take advantage of.

To give to two or more divs next to each other the same height, whatever is the amount of content they have, we need to use the following css property:value

 display:table and display:table-cell attribute.

The key element here, to successfully implement the trick, is to set the affected  the div a float:none;

Here the 3 divs included in the <article> will have the same height, whatever is the quantity of text. In the following capture, there’s more text:

See the css:

article {display:table; height:100%;}

    article div {display: table-cell; height:100%; float:none; }

That’s it!

See the editable code and the live exemple here:

Spread the love

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *