2010-01-27 86 views
2

%19左段宽度,%80内容宽度:股利布局:静态左边列宽,strechacle右列的宽度

alt text

但我想修复左段至200像素和内容部分是休息可视区域的宽度。

我该如何做到这一点与CSS?

<html> 
<head> 
    <title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title> 
    <style type="text/css"> 
     body 
     { 
      margin: 0px; 
      padding: 0px; 
     } 
     div 
     { 
      border: 1px solid black; 
     } 
     #header 
     { 
      background: #0f0; 
      width: 100%; 
     } 
     #leftcol 
     { 
      background: #f00; 
      float: left; 
      width:19%; 
      /* max-width: 200px; */ 
      height: 500px; 
     } 
     #content 
     { 
      background: #fff; 
      float: left; 
      width: 80%; 
      height: 500px; 
     } 
     #footer 
     { 
      background: #0f0; 
      clear: both; 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div id="header"> 
     Header Section</div> 
    <div id="leftcol"> 
     Left Section</div> 
    <div id="content"> 
     Content Section</div> 
    <div id="footer"> 
     Footer Section</div> 
</body> 
</html> 

回答