Question

I’m building a simple HTML/CSS template for myself, which is here, and it works great in everything but IE6. In IE6 the sidebar gets pushed down to the bottom which tells me that IE is getting the widths wrong.

The #wrapper div is 940px wide.
The #mainContent div is 730px wide
The #sidebar div is 209px wide.

730px + 209px = 939px

I am not using padding, margins, or borders on these divs… so I don’t think it’s the box model issue.

Anyone have any idea why IE6 breaks? I added the IE7 Javascript Code fix, but unfortunately I can’t see if it works because Adobe Browser Lab and Netrenderer don’t pick up the javascript.

If you could pop out Firebug and check out the template I’m sure some of you guys can spot what’s wrong right away.

Thanks a ton

Answer 1

See: http://jsbin.com/itolaw/5

I added float: left to #sidebar, and position: relative to #mainContent. I also removed IE7.js.

I’ve tested it in IE6 by using IE NetRenderer, as you mentioned in your question.