The float on the left in the div does not work in IE7, but in Firefox and IE8

Question

When I have three divs that all have a float, I want the sections to expand or contract based on how long the data inside them has been stored.

For example, if the first address is very long, I want the 1st box to expand and click on the second. Firefox does this, but Internet Explorer requires the width to look right. In IE7, it does not appear at all - each div has a table with two columns, and in IE7 it shows the path of the 2nd column to the far side of the page, and does not bind to the 1st column, despite setting align = left on the 2nd column and set a small width in the 1st column. I have the document type indicated on the main page, and I tried to add clarity: both without luck.

Why is the width completely changing, how is the floating point field displayed in IE, and how can I fix it? The page should look good 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 just looks great.

Answer 1

You should almost always include explicit widths when you are floating elements.

If you do not, the browser will have to guess what you mean. In this case, Firefox guesses better than IE, but you should not guess them. Be clear where you can.

edit: , , . , .

Answer 2

, float clear, DIV IE7.

float DIV CSS, clear div DIV, , :

:

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

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

Answer 3

display:inline-block , ? , , , float IE, JS, .

: 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 */