2010-01-27 87 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> 

回答