phpjavascriptjqueryhtmlcss

HTML Error: Display Inline-Block, not Inline?

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. 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

Solution

  • 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.

    before

    Removing it makes it look this way:

    after