如何製作我的內容專欄？

Question

我做了一個simple mockup of my website on jsFiddle。正如您所看到的，內容列中的文本沒有注意到其他元素，並且頁腳被推到了側欄下方。

據我所知，這是由於內容列的位置設置爲絕對值而應該發生的情況，但我不確定該如何讓列在標題後面上升。

如何修改或調整自己的網站，以便它可以看起來不那麼像上面多是這樣的：

注意，列的標題上面去了一個小方法。

Answer 1

改變你的CSS這樣的：

#header { 
    position: absolute; 
    overflow: hidden; 
    z-index: 1; 
    margin-top: 5px; 
    width: 100%; 
    left: 10px; 
    top: 30px; 
} 
#logo { 
    background-color: #909090; 
    width: 150px; 
    height: 50px; 
    display: block; 
    float: left; 
} 
#navbar { 
    position: static; 
    background-color: #606060; 
} 
#content { 
    background-color: #ffb600; 
    width: 50%; 
    z-index: 0; 
    margin-left: 90px; 
} 
#sidebar { 
    background-color: #ECEDEE; 
    width: 80px; 
    height: 100px; 
    position: absolute; 
    left: 10px; 
    top: 90px; 
} 
#footer { 
    background-color: #b6FF00; 
    z-index: 1; 
    width: 100%; 
} 

這基本上使頭和側邊欄絕對的，而是保持在頁面的正常流動的內容，從而使其能夠向下推動頁腳底部這一頁。