how to wrap an absolute div around 3 floating divs

Question

Basically I have a container set to absolute positioning, for which I CAN'T set a width or height for... so it needs to wrap around the content automatically.

However, inside the absolute div, are 3 divs that are set to "float: left", so that they will stack up next to eachother.

Once I set the parent to be absolute positioned, the 3 inside divs jumps down, and the parent div, doesn't wrap around them.

Is it possible at all? So that I can wrap an absolute div, around 3 floating ones (next to one another)

Answer 1

apply overflow：隐藏到父div

Answer 2

Make sure you are using a clear element following your floats (withing your abs position div)

Here is the Fiddle for it

CSS:

.left{
float:left
}
.clearL{
height:1px;
margin-bottom:-1px;
clear:left;
}
#wrapper
{
 padding:5px;
background-color:#e37c00; 
}

​ HTML:

<div id="wrapper">
    <div id="divOne" class="left">
       <p>Some content goes here...</p>
    </div>
    <div id="divTwo"  class="left">
       <p>Some content goes here...</p>
    </div>
    <div id="divThree"  class="left">
       <p>Some content goes here...</p>
    </div>
    <div class="clearL">
    </div>
<div/>

​

Answer 3

This will do the trick:

div.wrapper { /* outer-most div */
    ...       /* other styles */
    overflow:auto;
}

I use this often, works great inin all modern browsers.

Cheers