第四篇我们还是来探讨左右下布局。只是这一次,左边区域是定宽的,右边和下边不定。
还是先看看效果图:
然后上代码:
<div id="container">
<div id="wrapper">
<!-- 中间content start -->
<div id="content" class="red">
content
</div>
<!-- 中间content end -->
</div>
<!-- 左侧navigation start -->
<div id="navigation" class="yellow">
navigation
</div>
<!-- 左侧navigation end -->
<!-- 下侧extra start -->
<div id="extra" class="orange">
extra
</div>
<!-- 下侧extra end -->
</div>
css代码:
#container{}
#wrapper{float:left;width:100%;}
#content{margin-left:200px;}
#navigation{float:left;width:200px;margin-left:-100%;}
#extra{clear:both;width:100%;}