Help making the HTML/CSS layout work in IE

Question

Need some help with making the following layout work in IE:

Light gray is a browser window. Dark gray is the main content area, centered against the window. To its left is a fixed width yellow box, and to its right is a variable width green box. The yellow+blue+green triplet is then repeated down to the bottom (it's basically a simple blog layout).

I got this working in Firefox/Chrome by using negative margin-left and floating all three colored boxes. The IE does not understand it. Tried padding dark gray area on both sides by the width of the yellow box (and then do the overflow: visible, white-space: nowrap in the green box) - still no go.

Any ideas or pointers? What the hell does the IE understand?

Thanks

Answer 1

Alex, the trick here is pretty simple. Position those two *fixed_size* and *var_size* containers absolutely within #main. Give #main relative positioning. Then given the two absolutely positioned containers negative left and right margins, respectively.

Should certainly work in IE

Good luck and let me know if you need additional help

EDIT: this is the code that is also visible in the Fiddle:

<div id="main">
    lorem ipsum
    <div id="left">&nbsp;
    </div>
    <div id="right">&nbsp;
    </div>
</div>

and the CSS:

    #main { 
margin: 0 auto; position: relative; height: 300px; width: 400px; background: gray; 
}
    #left { 
position: absolute; width: 100px; height: 75px; left: -100px; background: red; 
}
    #right { 
position: absolute; width: 100px; height: auto; right: -100px; background: blue; 
}

Obviously, use the appropriate ways to center a div in IE with:

    body { 
text-align: center; 
}
    #main { 
text-align: left; margin: 0 auto; 
}

EDIT2: Check out the updated jsFiddle.. Hopefully that is something like what you wanted: http://www.jsfiddle.net/2avM7/3/