CSS: DIV height problem on float set

Question

Hi
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 leftDivbe passes the 200px height (the min height) upperDiv doesn't grow! so the content its content overlaps lower div! If i remove 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

Answer 1

Set #upperDiv any of the following:

overflow: hidden;
width: 100%;

or

float: left;
width: 100%;

or use the clearfix method by adding the class "clearfix" to upperDiv and then adding these styles in your global stylesheet.

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }

Answer 2

This is intentional as floats are designed for things like images in paragraphs (where multiple paragraphs can wrap around the image).

Complex Spiral has a fuller explanation as to why and Ed Elliot describes a number of approaches to making containers expand around floats. I find the overflow: hidden approach works best in most situations.