帮助使HTML / CSS布局在IE中工作

Question

在IE中进行以下布局需要一些帮助：

浅灰色是一个浏览器窗口。深灰色是主要内容区域，以窗口为中心。其左侧是固定宽度的黄色框，右侧是变量宽度绿色框。黄色+蓝色+绿色三元组然后重复到底部（它基本上是一个简单的博客布局）。

我在Firefox / Chrome中使用了负边距左边和浮动所有三个彩色框。 IE不理解它。尝试在两侧填充深灰色区域的黄色框的宽度（然后做溢出：可见，白色空间：nowrap在绿色框中） - 仍然没有去。

任何想法或指示？ IE

由于

Answer 1

亚历克斯，这里的诀窍非常简单。将这两个* fixed_size *和* var_size *容器放在#main内。给#main相对定位。然后给出两个绝对定位的容器分别为负左右边距。

当然可以在IE中使用

祝您好运，如果您需要其他帮助，请告诉我

编辑：这是在小提琴中也可见的代码：

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

显然，使用适当的方法将IE中的div居中：

    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的中心。