居中一个<div>并浮动其他权利
可能重复：
居中一个div而另一个div浮动到右侧？
我试图将container1和float2集中到它的右边，以便它稍微流出页面：
例如：http：//i.imgur.com/JHkfn.jpg
不幸的是，container2在container1的右下方跳动，就像你在网站模型中看到的那样（下面的链接）。
SITE MOCK-UP：http://ad313.samrandolphdesign.com/
CSS：
#container1 {
margin: auto;
background-color: #FFF;
width: 80%;
height: 100%;
max-width: 600px;
padding-bottom: 15px;
display: block;
}
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 80%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
float: right;
display: block;
}
尝试使用绝对定位而不是浮动。
就像是：
#container1 {
margin: auto;
background-color: red;
width: 50%;
height: 100%;
max-width: 600px;
padding-bottom: 15px;
text-align: center;
display: block;
position: absolute;
left: 25%;
}
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 50%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
display: block;
position: absolute;
right: -25%;
}
这里是一个jsfiddle编辑：如果你不想绝对定位容器1，只需添加top: 0; 到container2
在另一个div中包含两个div。 并使容器1和容器2的显示为内联块。
像这样的东西。
<div style="width: 2000px">
<div id="container1" style="width: 990px; display: inline-block">
</div>
<div id="container2" style="width: 990px; display: inline-block">
</div>
</div>
试试这个小提琴
首先，您需要在标记中将#container1放在#container2上方，以便浮动的顶部将成为#container1的顶部而不是之后。 其次，您需要给#container2一个负边限 - 将其移出屏幕。
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 80%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
float: right;
display: inline-block;
margin-right: -300px;
}