Internet Explorer Unable to Count to 100

by Liam McDermott, 6 January 2007 - 4:43pm

This article demonstrates the difficulties Internet Explorer has when calculating percentage widths in CSS-based layouts.

When designing this site we decided to use a ‘fluid CSS layout’, meaning we split the columns using percentages. The main column is 62% wide and the sidebar 38%; this adds up to 100%. Not according to Internet Explorer, which at certain widths acts as if it's more, forcing the sidebar below the main content.

So if you use Internet Explorer and certain boxes on this site are in the wrong places: it's because you're using a browser that cannot count to 100!

We get around this by using negative margins in the CSS, like this:


#sidebar {
   margin: 0 -2px;
}

This is a reasonable hack for the sidebar: the two pixels are simply covered up by moving the margin. Unfortunately, when applied to other parts of the site this hack looks terrible — the two pixels are noticeable!

The attached test page shows how this works. This is the CSS:

#page {
   width: 62%;
   float: left;
   background: #eecdcd;
}
#sidebar {
   width: 38%;
   float: right;
   background: #ececec;
}
.inner {
   padding: 1em;
   margin: 1em;
   background-color: #bbcdcd;
}

The bug appears only at certain—seemingly random—window widths. If the bug does not manifest itself immediately, resize the window. The following rules seem to apply:

the bug is more likely to appear with the inclusion of more content
padding and margin of nested elements
and design complexity

It seems the bug is more likely to appear if the layout has content: especially some nested elements that contain padding and margin. Microsoft would have at least tested their browser with simple layouts (we hope). Some investigation shows ‘Percentages challenge IE's formatting model’.

In summary: if you're working on a liquid layout and Internet Explorer is behaving weirdly, it's probably because it can't count to 100. Often, adding negative margins—of a couple of pixels— will fix the problem, sometimes having and undesirable effect upon a design.

Other workarounds are available, but none of these appear to work when applied to our test case.

If you've got a better solution, please enlighten us!

Bookmark/Search this post with: