HTML / CSS layout help in IE

Question

Need help in doing the following work in IE:

Light gray is a browser window. Dark gray is the main window-oriented content area. On the left is a yellow frame with a fixed width, on the right is a green box of variable width. The yellow + blue + green triplet is then repeated down to the bottom (basically this is a simple blog layout).

I got this working in Firefox / Chrome using negative margins to the left and floating all three color windows. IE does not understand this. I tried filling the dark gray area on both sides with the width of the yellow window (and then doing the overflow: visible, white space: nowrap in the green field) - still do not go.

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

thank

Answer 1

, . * fixed_size * * var_size * #main. #main. .

IE

,

EDIT: , Fiddle:

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

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; 
}

, div IE :

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

EDIT2: jsFiddle.. , - , : http://www.jsfiddle.net/2avM7/3/

Answer 2

-, , 3 , :

<div id="container" style="margin: 0 auto;">
 <div id="fixed_size>Content goes here</div>
 <div id="main_content" style="margin: 0 auto;">Center content</div>
 <div id="variable_size_container">Content for that goes here!<div>
</div>

margin: 0 auto; , div div.