css-layout（布局研究）之四

第四篇我们还是来探讨左右下布局。只是这一次，左边区域是定宽的，右边和下边不定。

 

还是先看看效果图:

 

然后上代码：

 

<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%;}