html - CSS - 页眉、内容、右侧 div、页脚 - 无法正确定位

Question

我是新来的。目前正在为一个网站设计布局，我正在尝试为该布局设置我的 css 规则。

这个想法是放在页面的中心:页眉、内容、页脚。并将 Aside(横幅的 div)放在 Content div 旁边。

到目前为止我是这样的:http://goo.gl/8vzX4B (jsfiddle)

与 Block2 或 Blue div 一起使用。如何将它附加到 Red div 旁边而不影响其他任何东西？

我尝试了很多 float 组合，但到目前为止没有任何效果。

如有任何帮助，我们将不胜感激!

CSS:

#block1 {
    margin-left: auto;
    margin-right: auto;
    width:900px;
    float:center;
    height:100px;
    background:black;
    margin-bottom:20px;
    }

#container {width:100%;
float:left;}

#block2 {

    width:900px;
    float:right;
    min-width:100px;
    width:200px;
    background:blue;
    height:300px;
    margin-right:20px;
}

#block3 {
    margin-left: auto;
    margin-right: auto;
    width:900px;
    float:center;
    background:red;
    min-height:400px;
    margin-bottom:20px;
}

#block4 {
    margin-left: auto;
    margin-right: auto;
    width:900px;
    float:center;
    height:150px;
    background:green;
}

Answer 1

在这种情况下，如果所有宽度都是固定的，您希望将容器宽度设置为导航宽度加上内容宽度加上任何边距或填充。

因此内容为 900px，导航为 200px，导航为 20px margin = 1120px

#container { width:1120px; }

同时删除所有 margin-left: auto 和 margin-right: auto 规则。

fiddle :http://jsfiddle.net/jNVvy/64/