CSS content overflow out of box IE <6

Question

I have a div that holds some text, it has a background with a border, but for some reason the box is not expanding to the text, even with overflow: auto; here is my script for the box as well as a picture:

.box { background: #ffdcba; border: 1px solid #f78d25; display: block; clear: both; margin: 4px 0px; padding-left: 15px; overflow: auto; }

the divs inside are just floating, left and right, and have display: inline on them. heres a picture:

http://i45.tinypic.com/2woj1br.gif

Answer 1

A floated box will not expand to fit its contents. You need to add a clearing element after your content. <br> is usually good.

Answer 2

YOu don't specify the exact construction of the HTML, but I"m asssuming you've got something like this:

<div class="box">
    <div style="float: left">test subject></div>
    <div style="float: right">
        <div>ASD</div>
        etc...
    </div>
</div>

Floating elements removes them from the regular flow and will cause the "overflow" you are seeing. You need to add a non-floated element below the floated parts to force the containing div.box to "expand" to contain the floats:

  <div class="box">
     <div style="blah blah" ....
     etc....
     <br style="clear: both" />
  </div>

As well, the overflow: auto will not have any effect on your .box style, because it does not specify any height or width - it will naturally just expand to contain whatever content you put in there. To force a scrollbar to appear, you need to put in either height or width styling, and enough content to exceed either of the limits.