<style type="text/css"> body { font: 12px arial; color: #000; background: #fff; margin: 0; } #header { height: 50px; color: #fff; background: #666; line-height: 50px; margin-bottom: 10px; } #right { width: 100%; color: #fff; float: right; margin-right: -240px; } #right_inner { height: 400px; background: #666; margin-right: 240px; } #left { width: 230px; height: 400px; color: #fff; background: #666; float: left; } #footer { height: 50px; color: #fff; background: #666; margin-top: 10px; } .clear { clear: both; } </style> </head> <body> <div id="header">顶部</div> <div id="right"> <div id="right_inner">右侧</div> </div> <div id="left">左侧</div> <div class="clear"></div> <div id="footer">底部</div>
另一种方法
<style type="text/css"> body { margin: 0; } #container { margin-left: 230px; _zoom: 1; /*兼容IE6下左栏消失问题*/ } #left { float: left; width: 230px; height: 600px; background: #ccc; margin-left: -230px; position: relative; /*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/ } #right { height: 400px; background: #0099ff; } #footer { clear: both; text-align: center; background: #009000; } </style> </head> <body> <div id="container"> <div id="left"> 左栏 </div> <div id="right"> 右栏 </div> </div> <div id="footer"> 底栏 </div>