I am having some difficulty with CSS and I’m not entirely sure how to fix it. So I’m putting this out there in the hopes that someone with CSS expertise can look and say something simple, like, “Hey, dummy, why not…”
The problem is “aside text.”
Aside text is like a pull quote, except it’s not pulled from the content like a pull quote is. I use aside text to avoid endless embedding of parentheticals, which (presumably) prevents the text from becoming impenetrable. It’s also a way for me to inject some humor into the posts, without detracting directly from the content.
Internally, aside text is handled with CSS and the HTML5 <aside> tag. The CSS itself is pretty simple:
#content aside {
font-size: 0.8em;
color: #1e1e1e;
left: 600px;
width: 250px;
text-align: left;
float: right;
margin: 0px 0px 20px 10px;
display: block;
line-height: 1.3em;
padding: 10px 10px 10px 10px;
border: solid 1px black;
background-color: #f5f5f5;
}
So isn’t that special? Anyway, the problem is this:
I have to put the aside text before the content to which it applies.
Here’s an example:
<aside>Here's some aside text.</aside> Here's some text to which the aside text applies.
Here’s that block, as it is rendered live:
Here’s some text to which the aside text applies.
Yuck. What I really want is to invert these, so that the aside text follows the content. But then what happens is the block gets placed below the targeted content.
I’m not sure how to fix this. I don’t like how the content is rearranged, but I can live with it – provided the browser being used renders the aside text properly.
On a mobile device, though… um… not so much. On mobile, the text is rendered as if it were an ordinary inline paragraph, which makes reading it rather disturbing.
I thought about using media types to disable it on mobile altogether, but that seems… silly. There should be a way to render it properly (and in natural order). I just don’t know it.