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

好的，我正在创建我的第一页，在这里碰到了一堵砖墙。我有一个侧边导航栏，主顶部导航栏，下面是内容容器。我的问题是左侧的导航栏（似乎）描述了carosel viewer容器在顶部导航栏下方的小型容器下方的位置。中央容器从左侧导航栏的最低点开始

请参见图片：

我试图将蓝色图像旋转木马容器直接放置在三个中央迷你容器的下方，但它将放置的页面的最高位置是左侧导航栏的最底部。我对网页设计很陌生，这不是我的事，我想在这里得到一些帮助

我已将代码复制到JS BIn中供您查看，我还注意到顶部导航栏下方的三个迷你CONTATINER比我的网页视图长，因此可能是这些因素导致了问题，而不是侧导航栏

JSBin链接：

---

非常感谢

出于某种原因，我无法让您的代码示例正常工作，但我只提供了一个简单的示例。这看起来像是浮动的问题。如果将float:left添加到侧栏的CSS中，将float:right添加到旋转木马和主内容容器的CSS中，奇怪的间距应该消失

这是我所说的一个例子

CSS

HTML

---

我似乎无法让那些jsbin正常工作。fab job我在上面添加了#侧边栏位“一切都很好-快乐的日子非常感谢：-）

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;
}

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