CSS - 标题，内容，右div，页脚 - 无法正确定位

I'm new there. Currently working on a layout for a website and I'm trying to set up my css rules for the layout.

我是新来的。目前正在为网站制作布局,我正在尝试为布局设置我的css规则。

The idea is tho place in center of the page: Header, Content, Footer. And place Aside (div for banners) next to the Content div.

这个想法是在页面的中心位置:标题,内容,页脚。并在Content div旁边放置Aside(横幅div)。

So far I'm like this: http://goo.gl/8vzX4B (jsfiddle)

到目前为止我喜欢这个:http://goo.gl/8vzX4B(jsfiddle)

The is with Block2 or Blue div. How to attach it right next to Red div that it doesnt affect anything else?

使用Block2或Blue div。如何将它附加在Red div旁边,它不会影响其他任何东西?

I have tried lots of float combination but nothing worked so far.

我已经尝试了很多浮动组合但到目前为止没有任何工作。

Would be thankful for any help!

感谢任何帮助!

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

2 个解决方案

#1

In this case, if all of the widths are fixed, you want to set the containers width to the width of the nav plus the width of the content plus any margins or padding.

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

So it would be 900px for content, 200px for nav, and 20px for the navs margin = 1120px

因此内容为900px,导航为200px,导航边距为20px = 1120px

#container { width:1120px; }

Also remove all the margin-left: auto and margin-right: auto rules.

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

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

#2

If I understand what you want to achieve. You should move block4 (footer?) out of container. Than declare

如果我明白你想要实现的目标。你应该将block4(页脚?)移出容器。比宣布

#container { display:table; min-width:900px; /*at least header width */ }
#block2, #block3 { display:table-cell; }

#1