HTML Error: Display Inline-Block, not Inline?

Question

I am trying to make a website for my school, and I am working on getting a area where there is a content area and also a sidebar. As you can see here: lrch.harrisonbh.com and I want the top of "Header 1" to match the top of "Sidebar." I put the css on a jsFiddle here: http://jsfiddle.net/GHpux/

I am using the css code here:

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;

}

But I get the undesired effect of the divs not matching up as you can see on the jsFiddle or my website. Im wonderding what is wrong with this? Thanks. I have tried many things. Thanks

Answer 1

Nice site, by the way. Sorry I didn't see the question. The fix is:

You need to remove the <br /> before the .sidebar .

Refer the screenshots.

Removing it makes it look this way:

Answer 2

Remove the <br> before sidebar, remove position:absolute and float:right from the sidebar and add vertical-align:top to sidebar and content.

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