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

[img]http://dl2.iteye.com/upload/attachment/0107/3790/69892fed-7974-3b42-9dbc-1027eeaaba57.jpg[/img]

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

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

[img]http://dl2.iteye.com/upload/attachment/0107/3925/eafcb48c-e2a8-3b8e-bbb1-4218bd5474ab.png[/img]


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

[img]http://dl2.iteye.com/upload/attachment/0107/3794/e1d82054-a7db-3038-abc5-b7792c93f926.jpg[/img]