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

Question

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

我在我的 css 中使用了 display:inline-block，我读到在使用这个标签时任何边距规范都将被忽略。我想知道任何潜在的替代方案是什么，因为我不想弄乱定位(无论窗口大小如何，页面都保持居中，我想保持这种状态!)这就是我没有使用的原因float:right 标记在“侧边栏”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 .