CSS column issue in IE8

[MainEvent]

We are building out a new store and have run into a design snag that I am hoping some other DIYer has encountered. I understand that this is specific to our store and hate asking for a favor... but I figure it's worth a shot.

Basically, we have a CSS frame template that is rendering improperly in IE8 and we can't figure out why. In Chrome, the page has the main content div as the large block with a thinner column to the right (screen shot attached) and renders fine 95% of the time. In IE8, the main content div expands to fill the full width of the site no matter what we do -- and the right column content gets pushed underneath. If we try to force the main content div to a fixed width, it will load and quickly flash in the right layout but then revert to the improper design.

We have tweaked settings for the better part of a day with no luck. In IE8 developer tools, we see a reference to an inline style for the main content div... but it's not in the template.

If it's better to see the live site, please check out usfsashop.3dcartstores.com

Thanks in advance for any insight!

[cbsteven]

First thing to try is the fix to force IE to render your site in standards-mode
Put this in your frame.html:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

[jleclair]

Something is pushing the width of your maincontent window on ie to 100% (inspector shows an inline style width:100%), however on chrome theres a defined width(width: 952px). You may want to start there. I didnt have long to glance, but thats the first red flag i see. Hope it helps you find your answer

also, beware of float bugs on ie. i believe they like you to have specified widths to play nice, and something about the parent container being pos relative. Google ie float bug and youll find more info on that.

enjoy!