Home/ Questions/Q 965249
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T01:57:57+00:00

When I have three divs that all have float left I want the sections

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0