Developer

Dealing with differences in CSS floats in IE and Netscape

An annoying problem that Web builders contend with is the varying interpretations and renderings of the same CSS code by different browsers. Here's a workaround to one problem: the differences in how variable-width floats are rendered in IE and Netscape.


This article is from Builder.com's Design and Usability Tactics e-newsletter. Sign up instantly to begin receiving the Design and Usability Tactics e-newsletter in your inbox.

One of the most annoying situations that Web builders contend with is varying interpretations and renderings of the same CSS code by different browsers. A radically different page rendering in various browsers was an unfortunate fact of life in the old days, but we expect better results from today's so-called standards-compliant browsers. Still, the differences linger.

The way that leading browsers handle floats is one such difference. This is particularly troublesome for anyone trying to build multicolumn layouts that resize dynamically with changes in the size of the browser window.

A plain no-floats page
Suppose you have two divs, div#one and div#two, that have fixed widths. Without floats or absolute positioning, those divs will appear stacked one above the other along the left side of the browser window (as shown in Example A) because the standard page flow goes from left to right and top to bottom, with each block-level element starting a new row immediately below the previous element.

Here's the HTML for all the examples to follow:
<body>
<div id="one">
    Port side text...
</div>
<div id="two">
    Second column text...
</div>
</body>

Here's the CSS code for the base no-floats version:
div#one {
    width: 150px;
   margin: 0px;
    background-color: red;
}
div#two {
    width: 300px;
    padding: 0px 10px 5px 10px;
    margin: 0px;
    background-color: silver;
}

Basic floats
When you create a CSS style that includes the float: left or float: right attributes and apply it to a block-level element such as a div tag, the div is removed from the normal text flow of the document and is forced to the left or right side of the containing element. If the containing element is the body tag, the div floats to the side of the browser window. Otherwise, the floated div moves to, but not past, the edge of the containing div.

If you have more than one floated element, the second and subsequent floated elements line up alongside the first, much like the letters in a line of text. A series of floated elements will align in a row, up to the width of the browser window, and then wrap to the next line like words in a paragraph.

Fixed-width floats
As long as div#one and div#two are both fixed widths, and their total width is less than the width of the browser window, they appear side by side, as shown in Example B. The major browsers are reasonably consistent in their handling of fixed-width floats. The following CSS code renders essentially the same in IE6, Netscape 7, Mozilla 1, and Opera 7.
div#one {
    float: left;
    width: 150px;
    margin: 0px;
    background-color: red;
}
div#two {
    float: left;
    width: 300px;
    padding: 0px 10px 5px 10px;
    margin: 0px;
    background-color: silver;
}

Variable-width floats give variable results
The problem of inconsistent rendering of floats shows up when you try to make one of the divs a variable width. For example, suppose you want a fixed-width column along the left side of the page for a list of navigation buttons, and another column to the right that is free to expand and contract to fit the browser window.

You might think that you can achieve this effect with two left-floated divs: one that's a fixed width and the other with the width set to auto to allow the div to resize automatically so it fills the space between the first div and the right side of the browser window. Example C demonstrates the following CSS code:
div#one {
    float: left;
    width: 150px;
    margin: 0px;
    background-color: red;
}
div#two {
    float: left;
    width: auto;
    padding: 0px 10px 5px 10px;
    margin: 0px;
    background-color: silver;
}

If you view this example in IE, you get the expected result of a fixed-width left column with a variable-width column immediately to its right; however, the other current browsers render the same code differently. The second div drops below the first instead of continuing the row across to the right. The result is very similar to the page without floats.

A workaround
One way to achieve the desired effect of a two-column layout with one column that resizes automatically is to use a floated div for the first column, but remove the float from the column that must resize. Because the floated column is separated from the normal document flow, a regular div will flow up and under the floated div. Add left padding equal to the width of the floated div, and the content of the regular div will look like it's in a column to the right of the left div. Example D demonstrates this technique. The following code renders the same in all the current browsers.
div#one {
    float: left;
    width: 150px;
    margin: 0px;
    background-color: red;
}
div#two {
    width: auto;
    padding: 0px 10px 5px 160px;
    margin: 0px;
    background-color: silver;
}

Although the current Netscape and Mozilla browsers are generally regarded as being more standards-compliant than IE, I think that the IE rendering of floated elements is more consistent than that of the other browsers. But regardless of which rendering is "right," it's the difference that causes the most headaches for Web builders. Being aware of the differences in browser rendering is the first and most important step in preventing problems in your page design.

Editor's Picks

Free Newsletters, In your Inbox