css+div页面布局之三

css+div页面布局之3
页面结构如下：

<div id="container">  
 <div id="wrapper"><!-- 主体文字 -->  
    <div id="content"><p><strong>1) Content here.</strong></p></div>  
 </div>  
 <div id="navigation"><p><strong>2) nav part here.</strong></p></div>  
 <div id="extra"><p><strong>3) extra part here.</strong></p></div>      
 

左边区域是定宽的，右边和下边不定宽：

#wrapper{float:left;width:100%;}    
#content{margin-left:200px;}    
#navigation{float:left;width:200px;margin-left:-100%;background:#B9CAFF;}    
#extra{clear:both;width:100%;background:#FF8539;}   

右边区域是定宽的，左边和下边不定宽：

#wrapper{float:left;width:100%;}    
#content{width:200px;float:right;}    
#navigation{margin-right:200px;background:#B9CAFF;}    
#extra{clear:both;width:100%;background:#FF8539;}

1:2:1宽度自适应

#wrapper{float:left;width:100%;}  
#content{margin:0 25%;}  
#navigation{float:left;width:25%;margin-left:-100%;background:#B9CAFF;}  
#extra{float:left;width:25%;margin-left:-25%;background:#FF8539;}