经典布局实现-定宽，浮动

by lai chendong

HTML

<nav class="top-nav"></nav>
<div class="main-container clearfix">
  <nav class="left-nav pull-left"></nav>
  <div class="main pull-right"></div>
</div>
<footer class="footer"></footer>

CSS

.top-nav{
  width:100%;
  height:80px;
  margin-bottom:20px;
}
.main-container{
  width:1260px;
  margin:0 auto;
  margin-bottom:20px;
}
.left-nav{
  width:200px;
  height:300px;
}
.main{
  width:1040px;
  height:600px;
}
.footer{
  height:100px;
  width:1260px;
  margin:0 auto;
}

.top-nav, .left-nav, .main, .footer{
  background:#ccc;
}
.pull-left{
  float:left;
}
.pull-right{
  float:right;
}
.clearfix:after{
  content:" ";
  display:table;
  clear:both;
}