如何在頁面左側添加背景顏色？

Question

我想在頁面的左側添加背景顏色。我有主div，其中心和固定寬度。我試過背景圖片，但它不適合我，因爲我在頁面上有無限滾動。下面是圖片，顯示我想達到的目標：

這裏是我的方法：

<div class="row"> 
    <div class="left"></div> 
    <div class="container"> 
     my custom HTML code 
    </div> 
</div> 

CSS

.container {width: 1000px; margin: 0 auto} 
.left {background-color: red; position: absolute; height: 100%; width:100%; top: 0px; left: -100%; } 

Answer 1

如果你想在中心和左側單獨的容器，這裏是它 http://jsfiddle.net/V6JaX/

.row { width: 100%; position: relative; } 
.left { width: 20%; height: 100%; top: 0; left: 0; position: absolute; background: red; } 
.container { width: 600px; margin: 0 auto; background: #FFF; } 

Answer 2

Check out the fiddle here

HTML

<div class="row"> 
    <div class="left"> 
     your left code 
    </div> 
    <div class="container"> 
     your custom HTML code 
    </div> 
</div> 

CSS

.container { 
    background-color: gray; 
    width: 80%; 
    margin: 0 auto; 
    float: left; 
} 

.left { 
    background-color: red; 
    float: left; 
    width: 20%; 
}