HTML 5 Section / Aside margin problem

I'm t开发者_如何学编程earing my hair out on this one. I've already set a reset stylesheet which I was hoping would handle everything and set all the margins and paddings to 0 (redundant, I know), but if you'll look at the result of this Fiddle, my section tag won't touch the side of my aside tag even though the browsers all indicate that there are no margins or paddings present.

Interestingly, it works in IE 7, all other browsers fail miserably. =/

They aren't touching because you've set aside and section to be inline-block elements:

nav, section, aside {
    display: inline-block;
}

With inline-block elements, whitespace in the HTML becomes significant.

One solution is to remove the whitespace between your aside and section:

http://jsfiddle.net/BzCsj/2/

<aside id="sidebar">asd
</aside><section id="main">test
</section>

Another solution is to switch from display: inline-block to float: left. I've done this here with inline CSS for simplicity: http://jsfiddle.net/BzCsj/4/