Site is Broken in IE6? Why?

[Reedly]

I am working on a template style website that uses html and css. I'm not completely proficient with css, but the site seems to work in Firefox and Internet Explorer 7, but it does not display correctly in IE6.

Each of the 4 pages of the following site displays the right column incorrectly in IE6. If you happen to check it out, it should be fairly simple to see the problem. I just don't have enough experience to understand what I should do different to make this site work in ie6 and ie7.

http://www.rideforreading.org

Please help out a css challenged designer!!
Thank you

 

[desi9ner]

Your problem looks to me like it's your h2 tag. Don't set widths in the h2 tag, unless there's something specific you're trying to do. Even if you are, then you could give the h2 a class, but right now you have it set to 300px and the <div id="right"> is set to 200 or something, so the h2 is forcing the div wider and because it's floated it's forced below the other <div>. IE really is a poor browser for standards.

To fix your problem remove the h2 width in your css. If that doesn't completely do it look at your padding. Don't put in a left padding on your #right because if it's floated right then you don't need that padding the alignment will take care of it.