Auto height and the float issue.

Question

I have had this issue before and can't remember if and how I fixed it.

I have to create a scenario where I have 2 DIV's floated left and right inside a parent DIV. The 2 floating DIV's have height:auto, but the parent ignores them (perfectly logical) and the background of the parent DIV can't be seen. I know what the issue is, but are there any suggestions of how to solve it? Or any alternatives, I am willing to try a new approach.

Thanks in advance for any help.

Answer 1

You need a clear:float in a div inside parent div:

.clear
{
  clear:both;
}

<div id="parent">
 <div id="left"></div>
 <div id="right"></div>

 <div class="clear"></div>
</div>

There are more options available to solve this problem.

Answer 2

With no meaningless HTML element to be added, you can clear floats the overflow way

<style type="text/css" media="screen">
    #allmychildrenfloat {
        overflow: hidden;
    }

    #allmychildrenfloat p {
        float: left;
    }
</style>
<div id="allmychildrenfloat">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec leo arcu, iaculis at, ultricies et, porta eget, urna. Nulla facilisi.</p>
    <p>dolor sit amet lorem ipsum</p>
</div>

Or you could use display: inline-block; instead of the float property, it depends on your exact needs. IE7- doesn't understand this value but it's OK if you give IE6 and 7 display: inline; zoom: 1;. And if you still support Fx 2, there is also an alternative.