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

Question

我正在努力为我的学校创建一个网站，并且我正在努力获得一个有内容区域和侧边栏的区域。正如你在这里看到的：lrch.harrisonbh.com，我希望“标题1”的顶部与“侧边栏”的顶部相匹配。我把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; 

} 

，但我得到的div的不良影响不匹配了，你可以在的jsfiddle还是看我的网站。我想知道这有什么问题吗？谢谢。我尝试了很多东西。谢谢

Answer 1

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

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

请参阅截图。

删除它，使它看起来是这样的：

Answer 2

侧边栏之前取出<br>，从侧边栏除去position:absolute和float:right并添加vertical-align:top侧边栏和内容。

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