爲什麼ID格式的DIV降到相鄰DIV下面？

Question

我無法在我的佈局中正確定位div form。

通過查看我的div位置和CSS下面，有沒有人有一個想法，我可以做錯了什麼？

<div id="wrapper"> 
    <div id="logo"></div> 
    <div id="topnav"></div> 
    <div id="nav"> 
    <ul> 
     <li><a href="#">link</a></li> 
     <li><a href="#">link2</a></li> 
     <li><a href="#">link3</a></li> 
     <li id="last"><a href="#">link4</a></li> 
    </ul> 
    </div> 
    <div id="gallery"></div> 
    <div id="floorplans"></div> 
    <div id="development"></div> 
    <div id="projects"></div> 
    <div id="form"><div> 
    </div> 

    <div id="footer"></div> 
</div> 

你會注意到div form正在下降。我應該怎麼做才能把事情排隊？我應該重新安裝div的位置嗎？

佈局的CSS是（我只包括對受影響的div代碼）：

<style type="text/css"> 
#floorplans { 
    float: left; 
    height: 165px; 
    width: 203px; 
    border-right: 1px solid #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    position: relative; 
    background: #FFFFFF url(images/floorplans.jpg) no-repeat; 
    padding-top: 14px; 
    padding-left: 20px; 
    display: block; 
    color: #000000; 
    line-height: 1.5em; 
    padding-right: 10px; 
} 
#development { 
    float: left; 
    height: 165px; 
    width: 204px; 
    border-right: 1px solid #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    position: relative; 
    background: #FFFFFF url(images/development.jpg) no-repeat; 
    padding-top: 14px; 
    padding-left: 20px; 
    display: block; 
    color: #000000; 
    line-height: 1.5em; 
    padding-right: 10px; 
} 
#projects { 
    background: #FFFFFF url(images/projects.jpg) no-repeat; 
    height: 127px; 
    width: 153px; 
    text-align: left; 
    padding-left: 300px; 
    color: #333333; 
    padding-top: 25px; 
    display: block; 
    float: left; 
    position: relative; 
    line-height: 1.5em; 
    font-size: 10px; 
    padding-right: 15px; 
    clear: left; 
} 
#form { 
    background: #990000 url(images/form.jpg) no-repeat; 
    float: left; 
    height: 309px; 
    width: 450px; 
    position: relative; 
    padding-top: 20px; 
    padding-left: 30px; 
    padding-right: 30px; 
    color: #FFFFFF; 
} 
</style> 

Answer 1

形式div的頂部與它前面的div的頂行。 #projects上的clear:left;將#projects移動到下一行（良好）以及以下內容（錯誤）。嘗試使用負頂部邊距，或者考慮重構HTML以在#projects之前放#form。

添加以下應該工作：

#form { 
    margin-top:-180px; 
} 
#projects { 
    border-right: 1px solid #FFFFFF; 
} 

Answer 2

因爲你有兩個塊（樓層平面圖和發展INFO）每一個邊界，他們現在太寬坐在旁邊的表格塊。通過刪除一個或兩個邊界並查看錶單是否在那裏彈出來進行測試。

請注意，負邊際往往在IE6中存在問題，請確定並檢查任何解決方案。