CODEWITHSUNDEEP
csshtml
Jonn
Jonn

Reputation: 4661

HTML 5 Section / Aside margin problem

I'm tearing 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. =/

Upvotes: 4

Views: 6715

Answers (1)

thirtydot
thirtydot

Reputation: 228182

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/

Upvotes: 5

Related Questions