Explorer: 1px (not borders) throws off floated div layout

[nate22]

My layout works perfect in Firefox, Safari and Opera. But, in IE, I have to reduce one of the div's by 1 pixel in order for it to work.

I have a div container of 777 pixels.

• Floated within the container div I have a header div floated to the left and a header menu div floated to the right.

• Below the header divs, I have one div floated the left and another floated to the right.
- the left div is 188 pixels
- the right div is 589 pixels

If you add 188 + 589, you get 777: a perfect fit.

But, in IE the right div flies below the left div unless I change it to 588 pixels. Then, it sits perfectly in IE, but in Firefox, Safari and Opera there is a 1 pixel white line between the two divs!

Might I ask, dear fellows, "wtf?"

[quiller]

Is there a border/padding attribute on either/both of the elements? IE interprets the box-model incorrectly (IE6: in quirks mode [without doctype]; IE5: always), which could be the case. Otherwise, seeing the actual markup and stylesheet would help.

[nate22]

Aha! There was padding. Do you know where I could find out how to fix that?

(I would put the actual markup in here, but I've actually added so much code it would be a pain in the butt to look at.)

Do you know where I could find the fix for this? I don't really know what (IE6: in quirks mode [without doctype]; IE5: always) means.

Thanks so much, that was a quick isolation of the problem.

[timgrayphoto]

You should always set a doctype when working with XHTML/CSS based designs. Quirks mode refers to IE's inability to render things correctly. Setting a doctype kind of "forces" IE to behave. When in doubt, use Strict.

[joe]

You can change the padding of the box in IE only by using the Star HTML CSS hack. Use something like * html #divname {} to apply the rules in IE only (not sure about IE 7).

[fatihturan]

You can change the padding of the box in IE only by using the Star HTML CSS hack. Use something like * html #divname {} to apply the rules in IE only (not sure about IE 7).

Or you can use conditional comments (http://www.quirksmode.org/css/condcom.html) for change padding of the box in Internet Explorer. ;)

[quiller]

When in doubt, use Strict.
Err. I'd recommend Transitional if in doubt, since somebody 'in doubt' is less likely to code strictly. Still, I'd agree with using Strict if the coder in question knows what that implies.

Or you can use conditional comments (http://www.quirksmode.org/css/condcom.html) for change padding of the box in Internet Explorer.
Wonderful idea. To clarify, joe's suggestion of using the star-hack is outdated (due to IE7), but hacks like this were always the least-desirable solution. For the star-hack specifically, it applies to all versions of IE, whether Windows or Mac, 5.01 or 6.0. Conditional Comments are much, much more specific (oh, and valid).