在一個布局中，假設有導航元素和內容元素，切給他們都分別應用了背景，理想情況下，背景應該拉長到整個布局的最大高度，從而形成列的效果，但是實際上，因為導航元素沒有擴展到最大高度，所以它們的背景不會拉長，如圖所示，左邊的導航的灰色背景的高度沒有達到最大高度。
解決方法：為創建列的效果，需創建一個偽列，即在一個占據布局最大高度的元素上應用重復的背景效果——faux列。關鍵在于創建合適的背景圖片。
固定寬度的布局
只需在容器元素上應用一個垂直重復的背景圖像，其寬度與導航區域相同。為固定寬度的布局設計faux列是很容易的，因為知道列的尺寸和位置。
#wrapper{
background: #fff url() repeat-y left top;
}
流式布局
流式布局有點復雜，因為列的尺寸和位置隨著瀏覽器窗口縮放而變化，技巧是按百分比對背景圖像進行定位。
- 使用像素設置背景的位置：圖像的左上角會定位在距離元素左上角指定像素數的地方。
- 使用百分數定位：會對圖像上的對應點進行定位，例如：將垂直和水平位置設置為20%，那么實際上會把圖像上距離左上角20%的點定位到父元素上距離左上角20%的位置。
例如需要創建如下圖的布局：左邊導航為次內容區，占總內容區的25%，右邊為主內容區，主內容區中左邊為主內容區，占主內容區的72.82%，右邊為次內容區。
簡單代碼如下：
<div class="wrapper">
<div class="inner-wrapper">
<div class="content">
<div class="primary">
<div class="primary"> </div>
<div class="secondary"> </div>
</div>
<div class="secondary"> </div>
</div>
</div>
</div>
<style>
.wrapper{
width:76.8%; /*960÷1250=76.8%*/
margin:0 auto;
text-align:left;
min-width : 62em; /*比較小的窗口尺寸，布局太擠，所以添加以em為單位的min-width*/
max-width : 125em; /*設置為em為單位的max-width是為了確保文本行的長度適合閱讀*/
}
.content .primary{
width : 72.82%; /*670÷920=72.82% ，因為在wrapper設置了水平居中，所以40px均勻分布在content容器兩側各20px*/
float:right;
display:inline;
}
.content .secondary{
width:25%; /*230÷920=25%*/
float:left;
display:inline;
}
.content .primary .primary{
width:59.7%; /*400÷670=59.7%*/
float:left;
display:inline;
}
.content .primary .secondary{
width:34.33%; /*230÷670=34.33%*/
padding-right:3%; /*20÷670=3% 設置內邊距，避免其包含的文本緊挨著元素的右邊緣*/
float:right;
display:inline;
}
</style>
上述代碼實現了三列，但是并沒有實現兩側的背景圖像，下面步驟來逐步實現：
1.給次內容區創建faux列
- 先創建一個faux圖像，4000px寬，5px高。
- 因次要內容區是總寬度的25%，所以在背景圖像上創建寬25%的對應區域，即圖像的faux列部分是寬為1000px的灰色，其余為白色。
- 圖像的faux列的右邊緣與圖像的左邊相距25%，次內容區的右邊緣與容器的左邊相距25%，所以如果把這個圖像作為背景應用于容器，并將水平位置設置為25%，那么faux列的右邊緣會正好與次內容區的右邊緣對齊。
增加的代碼為：
.wrapper{
background:#fff url(1.gif) repeat-y 25% 0;
}
2.為主內容區創建背景
- 先創建一個faux圖像。
- 因主內容區1是主內容區總寬度的72.82%，所以在背景圖像上創建寬72.82%的對應區域為白色，其余為灰色。
- 圖像的faux列的左邊緣與圖像的左邊相距72.82%，次內容區的左邊緣與容器的左邊相距72.82%，所以如果把這個圖像作為背景應用于容器，并將水平位置設置為72.82%，那么faux列的左邊緣會正好與次內容區的左邊緣對齊。
- 因為在wrapper元素上已經應用了背景，所以需要添加一個容器元素，然后將該faux列的背景圖像應用于這個新的容器元素，即inner-wrapper元素。
增加的代碼為：
.inner-wrapper{
background:#fff url(2.gif) repeat-y 72.82% 0;
}
