I bet, you might have struggle a lot to get this simple solution if you are here via google search. There are instances when two divs in parallel have dynamic content and it becomes difficult to keep their height equal. One of the hack is using overflow:hidden, which might not be valid in some cases and some browser might completely ignore this css style. So in this post I am going to show you how you can have two or more dynamic content changing divs of equal height in parallel.

I am sharing the simple HTML + CSS code with you and a live demo can be seen here http://digimantra.com/resources/equal_div.html .



Example of collapsing/wrapping divs when given floats

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
MY text should be here in ROW 1

Example of using clear:both to have divs of equal height

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
MY text should be here in ROW 1

So you have to use the clear property of CSS to avoid wrapping or collapsing of the divs as show in the above example. This is very useful property and can be used on various part of a website.

Hope that helps.

Stay Digified !!

Sachin Khosla

Share this post: