HTML错误：显示内联块，而不是内联？

Question

我正在为我的学校建立一个网站，我正在努力建立一个有内容区域和侧边栏的区域。正如你在这里看到的：lrch.harrisonbh.com，我希望“Header 1”的顶部与“Sidebar”的顶部相匹配。我把css放在jsFiddle上：http://jsfiddle.net/GHpux/

我在这里使用css代码：

div.body{
    width: 1047px;
    margin-top: 210px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

div.content{
    background-color: #dbdbdb;
    width: 750px;
    max-width: 750px;
    float: left;
    padding: 15px;
    margin-right: 15px;
    z-index: 1;

    display: inline-block;
}

div.sidebar{
    background-color: #dbdbdb;
    width: 215px;
    float: right;
    position: absolute;
    padding: 15px;
    display: inline-block;

}

但是我在jsFiddle或我的网站上看到了不匹配的div的不良效果。我想知道这有什么问题吗？谢谢。我尝试了很多东西。感谢

Answer 1

顺便说一下，好的网站。对不起，我没有看到这个问题。修复是：

您需要删除<br />之前的.sidebar。

参考屏幕截图。

删除它会让它看起来像这样：

Answer 2

移除侧栏前的<br>，从侧栏移除position:absolute和float:right，然后将vertical-align:top添加到侧边栏和内容中。

http://jsfiddle.net/GHpux/1/