CSS: DIV containing no height on float set

css, height, html, overlap

Solution

Set `#upperDiv` any of the following:

overflow: hidden;
width: 100%;

or

float: left;
width: 100%;

or create a rule using CSS pseudo-elements (IE8+ compatible) like this

#upperDiv:after {
  content: "";
  display: table;
  clear: both;
}

Best solution Creating a reusable class rule like the following.

.group:after {
  content: "";
  display: table;
  clear: both;
}

Now you can apply it to anything that needs this same functionality. For example...

<div id='upperDiv' class="group" ... >

P.S. If you require IE 6/7 compatibility, checkout this post.

Problem

Given the following code: ``` <div id='upperDiv' style='min-height:200px'> <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; margin-top:5px'> content3 </div> ``` When content of `rightDiv` and `leftDiv` passes the 200px height (the value of `min-height`), `upperDiv` does not grow, so its content overlaps the lower div. If the float attribute is removed from the large content, it grows and causes problems. I do not know which of `rightDiv` or `leftDiv` exceeds 200px inheight. How can this be fixed?

Original source