Percentage widths and IE5

Sep 12 2006

I came across an annoying bug in Internet Explorer version 5.x today to do with the way it calculates percentage width of child blocks – and as I can’t find it documented clearly anywhere, here’s a brief write-up.

The problem

If you have a floated element A nested inside another block-level element B whose width is not explicitly set, and you set the width of block B in percent, IE5.5 and below will incorrectly calculate the width of B in relation to the window, and not with respect to its containing block A.

Here’s a diagram to hopefully illustrate this a little better than my explanation:

Diagram showing correct and incorrect rendering of floated blocks on IE5.x and other browsers

The solution

The way to fix this is to give the outer element (A) a width of 100%. Obviously this will break any decent browser (as width of 100% plus a margin will create a horizontal scroll), so the rule must only target IE5.x, either with conditional comments or a hack:

#outer {
width: 100%;
w\idth: auto;
}

The first rule is for IE5.x, the second resets the width for all upstream browsers.

I hope this might help someone avoid the hours I spent trying to fix a non-existent problem…

Filed under: CSS.

Technorati tags:

Digg this article

Bookmark this article with del.icio.us

Previously: BarCamp London - Day Two

Next: How to tell whether you work for a startup or a corporate


Comments

George
654 days ago

Good spot.

Looks like this is fixed by any property that triggers the haslayout propery. So a
zoom:1; /* (invalid) */
will work fine also. Or a
height:auto !important;
height:1px;

#1