两列弹性版式

HTML

<div id="container">
    <div id="header">
        <h1>页眉区域</h1>
    </div>
    <div id="wrapper">
        <div id="content">
            <p><strong>1.主体内容区域</strong></p>
        </div>
    </div>
    <div id="navigation">
        <p><strong>2.导航栏</strong></p>
    </div>
    <div id="extra">
        <p><strong>3.其他栏目</strong></p>
    </div>
    <div id="footer">
        <p>页脚区域</p>
    </div>
</div>

					    

CSS

/*----------------------------------------------
 *页面基本属性*/
html, body, h1, p {
    margin: 0;
    padding: 0;
}
body {
    text-align: center;
    text-shadow: 1px 1px 1px #A4A4A4;
    /*padding-left:240px;*/
}
a {
    color: #006;
}
/*页面基本属性结束
----------------------------------------------*/

/*----------------------------------------------
 *装饰*/
div#header {
    background: #EEE;
    color: #79B30B;
}
div#navigation {
    background: #B9CAFF;
    color: #FF8539;
}
div#extra {
    background: #FF8539;
    color: #B9CAFF;
}
div#footer {
    background: #444;
    color: #ddd;
}
/*-----------------------------*/
div#header {
    height: 100px;
    line-height: 100px;
}
div#content {
    height: 200px;
    line-height: 200px;
}
div#navigation {
    height: 200px;
    line-height: 200px;
}
div#extra {
    height: 100px;
    line-height: 100px;
}
div#footer {
    height: 60px;
    line-height: 60px;
}
/*装饰结束
----------------------------------------------*/
 
/*----------------------------------------------
 *布局*/
div#wrapper {
    float:left;                               	/* 向左浮动 */
    width:70%                               	/* 百分比宽度 */
}
div#navigation {
    float:right;                                 	/* 向右浮动 */
    width:30%                               	/* 百分比宽度 */
}
div#extra {
    clear:both;                               	/* 清除左右浮动 */
    width:100%                               	/* 满屏显示 */
}



/*布局结束
----------------------------------------------*/