CSS: DIV containing no height on float set

user_342059 0
Viewed 37006

assume we have this code:

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>

When content of rightDiv and leftDiv passes the 200px height (the min height) upperDiv doesn't grow, so its content overlaps the lower div. If I remove the float attribute of the large content it grows and there will be problem. But I don't know which Div (rightDiv or leftDiv) passes 200px height. How can I fix this?

Thanks

height overlap css html
4 Answers

There is a new property introduced recently display: flow-root; Which will fix this issue without any hacks and have almost all major support

<div id='upperDiv' style='border: 1px solid #000000; display: flow-root;'>
     <div id='rightDiv' style='float:right;width:75%;'>
       content1
     </div>  
     <div id='leftDiv' style='float:left;width:25%;'>
       content2
     </div>
</div>
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'>
   content3
</div>

user_27241730
Related