Auto height and the float issue

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.

Tha开发者_JAVA技巧nks in advance for any help.

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.

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.

I know , it's tooo late to answer this question but anyone who is coming here after me can benefit from this answer.

USE display: inline-flex instead of floats and be happy.

Note : you'll need to check for the support of inline-flex value