導航欄和主屏幕的網頁容器對齊方式

Question

好吧，我正在創建我的第一頁並在此處打磚牆。我有一個側面的導航欄，主要的頂部導航欄與容器下面的內容。我的問題是左邊的導航欄（似乎）描繪了頂部導航欄下方的微型容器下面的carosel查看器容器的位置。 EG中央容器從左側導航欄的最低點開始。

看到的影像：

我試圖把正下方的三個中心小容器中的藍色圖像旋轉木馬容器，但最高的頁面中會放置本身左側導航欄的最底部。我很新的網頁設計這不是我的事情，並希望在這裏一些幫助。

我已經將代碼複製到JS BIn中供您查看，我還注意到那裏的頂部導航欄下面的三個迷你組件比我的網頁視圖長，所以也許是那些導致問題的那些組件而不是側面的導航欄？

JSBin鏈接：

http://jsbin.com/dimekupo/1/watch?html,css,js,output

http://jsbin.com/dimekupo/1/edit?html,css,js,output

非常感謝

Answer 1

我是不是能夠得到您的代碼示例出於某種原因，但我卻一起SIMPL例子。這看起來像是浮動問題。如果將float：left添加到您的側邊欄的CSS，並且將float：傳遞到旋轉木馬的CSS以及怪異間距應該消失的主內容容器的右側。

下面是我正在談論的一個例子。

http://jsfiddle.net/7QzAu/3/

CSS

body { 
    width:900px; 
    margin:0 auto; 
    font:26pt Georgia; 
    color:#fff; 
    text-align:center; 
} 
#sidebar { 
    float:left; 
    width:200px; 
    height:400px; 
    background:Red; 
} 
#content { 
    width:700px; 
    float:right; 
    height:350px; 
    background:blue; 
} 
#below { 
    float:right; 
    width:700px; 
    height:200px; 
    background:green; 
} 

HTML

<div id="sidebar"></div> 
<div id="content"></div> 
<div id="below"></div>