重新创建网站时的css div位置

Question

我正在重新创建这个美国社区学院协会网站 viewable here，到目前为止一切正常，但是在通过图像放置 div 时遇到了问题（您可以查看我的 W.I.P. 和完整代码 @987654322 @)。它特别需要处理侧边栏。从实际网页中可以看出，标题和横幅/侧边栏之间存在间隙。但是在我的网页上，我能够在图像和横幅之间创建边距，但侧边栏（无论我做什么）都无法复制实际的网站。

我在我的 css 中使用了 display:inline-block，我读到在使用这个标签时，任何边距规范都将被忽略。我想知道任何潜在的替代方案是什么，因为我不想弄乱定位（无论窗口大小如何，页面都保持居中，我想保持这种状态！）这就是为什么我没有使用浮动：“侧边栏”div上的右标签。任何更好地改进代码的建议将不胜感激！这是有问题的css代码，以防你不想去我的页面查看源代码：

#header {width:970px; height:105px; position:absolute; top: 0px; background-color:#C0C0C0;}

#navbar{text-align:right;}
#navbar a{text-decoration:none; color:#787878;}

#logoalign{vertical-align:bottom;}

#banner {float:left; display:inline-block; width:730px; padding-top:105px; margin-top:10px}

#sidebar{display:inline-block; padding-top:110px; margin-top:10 px; width: 240px; height:700px; background-color:#33FF33}

Answer 1

我会将侧边栏和横幅 div 放在包含的 div 中。

#navbar{
    margin: 0px 10px;
    width: 610px;
    height: 50px; }

#content {
    margin: 10px; }

#banner {
    float: left;
    width: 400px; }

#sidebar {
    margin-left: 410px; 
    width: 200px;
    height: 500px; }

这是jsfiddle。