So I'm wont to go off on tangents. It's just the way I think, and probably the way most people do. But rather than hear the internal dialogue and carry on, I tend to feel trapped by the new idea. The aside gains so much presence in my mind that unless it's vocalized or otherwise dealt with, it fully derails my thoughts. It just takes over. For my blog, I thought it would be a mistake, even dishonest, not to respect that part of my character. So I add asides to my posts. It's easier for me anyway.

But which track will the train follow?

The problem with asides is how to treat them textually so they add to the content, rather than temporarily derail the reader's flow. That whole respect the content thing. Well, asides are content...sort of. Like in theater, they help the reader along or offer situational comedy, but the story itself doesn't require them. So I wanted to have the asides in the flow of the text, so the raw semantics would be accurate, but I wanted to avoid them impinging on the logical flow of the actual content. Here's what I devised:

My layout is a sort of 1.5 column layout, where the primary content is given the lion's share of the horizontal real estate, but there's a second columnar "area" to the right. I purposely planned this space not to be wide enough for an effective second column. It's there for spice. I styled blockquotes and images to hang into the area, and supporting text snippets to reside there alongside the content to which it pertains. A perfect place for asides.

Off to the sidelines with you

The asides are marked up inside a <span class="aside"> tagset inside the paragraph which sparked the invading little idea. This makes it natural to continue writing in stream of consciousness mode. So first things first, let's pull it out of the content

.aside {
   display: block;
   float: right;
 …
}

Since the containing <p> tagset has a width set, we need to liberate it.

.aside {
   display: block;
   float: right;
   position: relative;
   left: 14em;
   width: 13em;
…
}

That's a handy way of pushing the float 1em beyond the border. An adequote padding in this case. But the problem with position: relative is that the space in which the element was assigned before moving is sort of reserved, as if the rest of the content didn't know it wasn't really there. Well, in this case, it left a big hole in the content. Not cool. Simple fix?

.aside {
   display: block;
   float: right;
   position: relative;
   left: 14em;

   width: 13em;
   height: 0;
…
}

Default block overflow behavior is show, so our content now thinks the aside takes no vertical space, so there's nothing to wrap around. And our little aside lives happily on the sidelines.

Well-enough, you look lonely

I did say that pseudo-column was for spice after all. To give the aside a bit more flavor, I naturally set the font attributes to give it an appropriate feel, but then—for the browsers that can handle it—I added some colorful context.

.aside:before {
   content: '\0AB aside: ';
   color: #977;
   font-weight: bold;
}
.aside:after {
   content: ' \0BB';
   color: #977;
   font-weight: bold;
}

Leaving the text a lighter color to spare intrusion, I added the visual stimulus around the aside. Not just because I can, but I thought the red gave a little life back to the somber nature of the copy, which is, after all, the point of an aside.