导航栏和主屏幕的网页容器对齐方式

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

由于某些原因，我无法让你的代码示例工作，但我只是一个简单的例子。这看起来像浮动的问题。如果你将float：left添加到侧边栏的CSS并浮动：右边的旋转木马的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>