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

Question

I have my HTML like this ```

test

``` 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?

Accepted Answer

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

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

Solution

Problem