I hope I'm not breaking any rules by asking a question that pertains to a project I'm working on. If you view my page here and view it in Firefox and again in Internet Explorer, the width of the main content boxes differs. In Firefox, everything aligns perfectly with the advertisement at the top of the page, but in IE, the width of the content boxes seems to fall short by about 20 or so pixels.

My question is obvious by now, but what is causing the width in IE to fall short, and what would a simple solution be?

If I happen to be breaking the rules by asking a question that is not generic enough to benefit others, then allow me to rephrase it; what would be the best approach to solving visual differences between browsers? Should I use a separate CSS file for IE, or is there a way to define lines in my CSS file that only get rendered by a specific browser?

It would be best if someone could provide me with the necessary CSS to align things properly, but I would be more than happy to learn about how to make the CSS dynamic (if that's possible).

Thanks everyone. :)