content dropping down in IE 6

I don't have IE 6 to be able to see exactly what it's doing, but I'm guessing it may have to do with the fixed widths. With the margins on the maincontent and leftsidebar, it may make the content too big for the div and then push it down. Fluid widths might be a better method, although I don't understand why what you are doing wouldn't mess up in all browsers.

It's the padding on the #main div (starting from line 59). If you comment out the width and padding, then change the margin to match what the padding was it'll work.

Still having problems, now with IE 7 . . .

I have banged my head around on this for a day now and cannot figure out what I've done wrong.

Site looks okay in Safari and Firefox on a Mac, but when viewing on IE 6 or IE 7, it is a jumbled mess. Currently the side menu drops below the main content.

When I first designed the site I had the left side menu floating left, but I had the opposite problem - the flash and main text dropped down below it. I then took off the float from the side menu, added a wide right padding (someone told me about IE doubling margins or something), and made the main content to float right. Now I have what you see at: http://www.harvestchapelclt.org/

What stupid things am I doing wrong?

The cause of the problem is that #nav is floated left. Add clear: both; to #contentwrapper and you'll get the site working incorrectly across all browsers. You should then be able to positiong things correctly by adding padding (or margin) to the left menu and main content.

It looks fine now in IE 6 and 7. For someone who is a CSS "newbie" this is very impressive.

You inadvertently triggered IE's "extreme font sizing bug"[1] Add the declaration "font-size: 100%;" to the rule for "html" to fix this.

Well done!

[1] See www.gunlaug.no/contents/wd_additions_13.html