css之双飞翼布局

css之双飞翼布局

by xiaobai

HTML

<div class="page">
    <div class="page-hd">head</div>
    <div class="page-bd clearfix">
      <div class="main">
        <div class="main-wrap">
main
<pre>
.main{
    float:left;
    width:100%;
}
</pre>           
        </div>
      </div>
      <div class="sub">
sub
<pre>
.sub{
    float:left;
    width:200px;
    margin-left:-100%;
}
</pre>
     </div>
      <div class="extra">
extra
<pre>
.extra{
    float:left;
    width:300px;
    margin-left:-300px;
}
</pre>
        </div>
    </div>
    <div class="page-ft">footer</div>
  </div>

CSS

*{margin:0;padding:0;}
body{font: 22px/1.5 Verdana, Geneva, sans-serif; color: #333; min-width: 500px;}
pre { font: 12px Georgia, "Times New Roman", Times, serif; }
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.main { background: #D6D6D6; }
.sub { background: #E79F6D; }
.extra { background: #77BBDD; }
.page-hd, .page-ft {
  height: 50px;
  line-height:50px;
  background: #666; 
  color: #eee;
  text-align: center;
}
.page-ft { height: 40px;line-height:40px;}

.page-bd{overflow:hidden;zoom:1;}

.main{
    float:left;
    width:100%;
}
.sub{
    float:left;
    width:200px;
    margin-left:-100%;
}
.extra{
    float:left;
    width:300px;
    margin-left:-300px;
}
.main,.sub,.extra{
    padding-bottom: 5000px;
    margin-bottom: -5000px;
}
.main-wrap{
    margin:0 300px 0 200px;
}