研究浮動排列 
body{
width:1000px;
margin: 0 auto;
}
.body{
position: relative;
padding:5px;
background-color:red;
}
.top{
position: relative;
width:100%;
height:100px;
background-color:#fff;
}
.c{
position: relative;
top:5px;
width:100%;
height:600px;
background-color:#fff;
}
.main{
position: relative;
display:inline-block;
float:left;
width:80%;
top:5px;
margin-left: 5px;
border: 2px solid #ff8000;
}
.left{
position: relative;
display:inline-block;
float:left;
width:18%;
top:5px;
margin-left: 5px;
border: 2px solid #ff8000;
}
<div class="body">
<div class="top">top</div>
<div class="c">
<div class="main">
main<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>
</div >
<div class="left">
left<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</div >
</div>
</div>