The Problem with <aside>
I use the <aside> tag a lot on this blog. It’s a handy new tag in HTML5 for sidebars and other accompanying content, which is fantastic, semantically. I display my <aside>s next to the text and use them as marginalia.
The problem comes in when I try to display them. I want the aside to appear to the right of the paragraph it’s talking about, so people who are reading can glance over and see I have more to say on the topic. I use the following code to do this:
aside {
float: right;
margin-right: -189px;
width: 169px;
}
Fits nicely into my golden ratio grid. Everything is happy.
Except, for this to line up properly, I have to put my aside before the paragraph it’s referencing. Otherwise, the floated aside will render starting on the bottom edge the paragraph, instead of the top—as you’d expect if you know CSS. But, to someone reading in the Tumblr feed, or in an RSS reader, it’s out of place and jarring.
Is the problem RSS readers and Tumblr, or is there a better solution in HTML5?
