万事屋软件科技

DIV左右布局(右侧定宽,左侧自适应宽)

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

  2. <html>  

  3. <head>  

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  

  5. <title>左右布局(右侧定宽,左侧自适应宽)</title>  

  6. <style type="text/css">  

  7. body{font:12px arial;color:#000;background:#fff;margin:0}  

  8. #header{height:50px;color:#fff;background:#666;line-height:50px;margin-bottom:10px}  

  9. #content{width:100%;color:#fff;float:left;margin-right:-240px}  

  10. #content_inner{height:400px;background:#666;margin-right:240px}  

  11. #side{width:230px;height:400px;color:#fff;background:#666;float:right}  

  12. #footer{height:50px;color:#fff;background:#666;margin-top:10px}  

  13. .clear{clear:both}  

  14. </style>  

  15. </head>  

  16.   

  17. <body>  

  18. <div id="header">顶部</div>  

  19.   

  20. <div id="content">  

  21.     <div id="content_inner">左侧</div>  

  22. </div>  

  23. <div id="side">右侧</div>  

  24. <div class="clear"></div>  

  25.   

  26. <div id="footer">底部</div>  

  27. </body>  

  28. </html>