Why don't two inline-blocks line up to the top in parent wrapper div?

Question

I have my HTML like this

<div id="wrapper">
    <div id="main">
        <p>test</p>
    </div>
    <div id="sidebar">
        <p>test</p>
    </div>
</div>

And CSS

#wrapper {
    width: 960px;
    margin: 0px auto;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
}

Example: http://jsfiddle.net/Hpwff/

The problem is that even though the sum of both divs is 960px, which is the same width as the parent container's (#wrapper), they do not float next to each other. I have to shrink either the sidebar or main containers width back by 4px so they fit. Why is this, and is there a way around it?

Answer 1

You have a newline between the two divs; since they are inline-block, the newline between them is rendered as a space. Without space it works as you expect.