My flash and middle content is dropping down below my left side bar in IE 6. Looks okay on a Mac running Safari and Firefox, and looks okay in IE 7.

Could someone please take a look at the site: http://www.harvestchapelclt.org and give me an idea of what might be going on? Newbie at CSS so I'm sure I've done something stupid. . . thanks!

Actually, you didn't do anything stupid at all. Doesn't that make you feel a little better? IE6 doesn't like that code because IE6 doesn't like that code, not because you did something wrong.

It sounds like you hit a margin bug with IE. Try changing the part below (the change is highlighted in bold):

#main {
 width:585px;
 padding: 10px 0 0 215px;
 margin: 0;
 }

As a general rule of thumb, browsers handle padding far more consistently than they do margins (I have no idea why this is...it just is.)

What you ran into was IE's doubled float margin bug. This happens when you float an element (left or right) and then add margins going in the same direction, ie. float: left, with a left margin. IE doubled the margin on #leftsidebar when you added the rule: margin: 5px - turning what should be a 5px left margin into 10px.

Thanks so much for your help folks, but I tried it using your suggestions and it still wants to drop everything beginning with the flash down toward the middle of the page when viewing on IE 6. . . which, unfortunately, the client is using.

Is there anything else I may be missing?

I tried taking the flash out of the main div and the "maintext" div and floating it to the right, but that didn't help either. The middle heading and content stayed down about halfway . . thanks.

The only other thing I can think of is to do a little trial and error using IE6 conditional commenting. Create a stylesheet for IE6, but make sure you put it after your existing stylesheets in your code (that way, the IE6 CSS will override the non-IE CSS and not the other way around.)

Mess around with that, and see where that takes you.

There is another way to combat this - 2 actually.
Float the content column left as well, but do NOT put a left margin on it. You are running afoul of IE6's busted box model, even with the padding IE gets it wrong.
If you float the right column, you'll have to use padding ON THE PARAGRAPH inside it to achieve some white space.

The other method is to NOT float the right column at all, but give the right column a left margin wide enough to push it past the left column, again using padding on the <p> inside it for white space.

The 'fix' for the doubled-float margin bug is to put set the left column to display: inline and put that rule in the CSS file Adam mentioned above, calling it with a conditional comment.