Float left in a div does not work in IE7 but does in Firefox and IE8

Question

When I have three divs that all have float left I want the sections to expand or contract based on how long the data inside them is.

For instance, if the 1st address is very long I want the 1st box to expand and push the 2nd one over. In Firefox it is doing this but in Internet Explorer it requires a width to look right. In IE7 it doesn't display right at all - each div has a table with two columns and in IE7 it shows the 2nd column way over to the far side of the page instead of snug with the 1st column despite setting align=left on the 2nd column and setting a small width on the 1st column. I have the doc type specified in the master page and I've tried adding clear:both with no luck.

Why does the width totally change how the float section is displayed in IE and how can I fix this? The page must look nice in IE7.

.FloatingSection
{
    float:left;
    padding-bottom:10px;
    padding-right:10px;
}

<div id="FirstPerson" class="FloatingSection">
</div>
<div id="SecondPerson" class="FloatingSection">
</div>
<div id="ThirdPerson" class="FloatingSection">
</div>   

I noticed that in IE8 this looks just fine.

Solution 1

You should almost always include an explicit width when you're floating elements.

If you don't, browsers have to guess what you mean. In this case, Firefox is guessing better than IE, but you shouldn't make them guess. Be explicit where you can.

edit: If you want all three boxes to expand with the content, I'd suggest setting percentage-based widths. In general, you're going to want to look up techniques for fluid column layouts.

Solution 2

Just discovered that if you have a float and a clear applied to a DIV IE7 chokes.

Instead, specify the float, in the DIV's CSS, but remove the clear and place an empty div, after the DIV in question, like this:

BEFORE:

<div style="float:left; clear:right;">Content goes here</div>

AFTER

<div style="float:left;">Content goes here</div>
<div style="clear:right;"></div>

Solution 3

Have you considered display:inline-block instead of floating? I don't think you can do what you want with floats AND support IE without using some JS to explicitly define width on each floated element.

Another note, you have to declare a second separate rule for block level elements in IE:

HTML:

<div class="foo">test</div><div class="foo">bar</div>

CSS:

.foo { display:inline-block; }
.foo { display:inline; } /* Feed this to IE below 9 only with a CC. Don't feed it to modern browsers */