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 .
<style> #example1 {border: 1px solid red;display: knone;} #example1 .inner1 {float: left;width: 50%;border-right: 4px solid #000;} #example2 {border: 1px solid orange;margin-top: 10px;} #example2 .inner1 {float: left;width: 50%;border-right: 4px solid #000;} #example2 .clear{clear: both;}</style> <h2><font color="#ff8000">Example of collapsing/wrapping divs when given floats</font></h2> <div id="example1"> <div class="inner1">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. </div> <div class="inner2"> <div>MY text should be here in ROW 1</div> </div> </div> <h2 style="margin: 10px 0px; clear: both"><font color="#ff8000">Example of using clear:both to have divs of equal height</font></h2> <div id="example2"> <div class="inner1">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. </div> <div class="inner2"> <div>MY text should be here in ROW 1</div> <div class="clear"></div> </div> </div> |
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
