css-layout（格局研究）之三 _HTML/CSS

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:right;width:70%;}     /*右侧做右浮动，宽度70%*/
#navigation{float:left;width:29.9%;}  /*左侧做左浮动，宽度29.9%*/
#extra{clear:both;width:100%;}       /*清除一下*/