流体和固定布局

Question

如何并排放置2个div，一个div宽度为75％，另一个宽度为25％。另一个div为margin：0 auto;在它的顶部，以使页面中心的内容宽度为：986px;

请查看以下代码

#bodywrapper
{
margin:0 auto;
}
#green-portion
{
background:url('images/green_portion.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:75%;
    position:absolute;
    top:30%;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1;
    display:none;
}
#blue-portion
{
    width:25%;
    background-color:#051f3b;
    height:400px;
    position:absolute;
    top:30%;
    bottom:0;
    left:75%;
    right:0;
    overflow:hidden;
    z-index:99999;


    }
<div id="bodywrapper">



<div id="green-portion">
</div>

<div id="blue-portion">
</div>

</div>

Answer 1

#bodywrapper {
 margin:0 auto;
}
#green-portion {
    background:#00CC00; 
    width:75%;
    height:400px;       
    top:30%;
    float:left; 
}
#blue-portion {
    width:25%;
    background-color:#051f3b;
    height:400px;   
    top:30%;
    float:right;
}
<div id="bodywrapper">
  <div id="green-portion"></div>
  <div id="blue-portion"></div>  
</div>

Answer 2

css;

#blue-portion {
     float: right;
}