If that doesn't do it ( or if it also breaks IE) you may have added padding, margin or border to any of those elements and you need to take that into account whenever you declare a width . Example : {width:15%; border:5px solid pink; padding 25px; margin:0 5%;} actually computes to:

15% + (5% +5%)from Margin + (25px +25px)from Padding + (5px +5px)from Border=25%+60px. So if you were expecting the width to be 15% or even 25% you'd be off and your element will "drop"

DaveMaxwell
—
2012-06-12T19:44:16Z —
#9

justlukeyou said:

Hi, this my CSS. Ive tried different things like changing the height. It works fine in IE but the div collapses in Firefox.

#headerleft {float:left;width:15%;height: 100%;}

#headerright {float:right;width:15%;}

#header {float:left;width:70%;}

This is a completely different scenario than you posted earlier - you asked about one container at 80%, now you've got three containers which you want to place side by side. Assuming that you don't have any child content that is larger than your anticipated widths, you should be OK (don't forget to clear your floats though).

If however, headerleft and headerright are there simply to force the margins, that's not the approach to take.