Sometimes you want to have a list of text items or images appear on the same line but with some items aligned to the left and some aligned to the right. An example of this would be a footer where you want to split the links down the middle. Or maybe a blog post where you want to put the date on the left and the number of comments on the right.
Footer links
Taking the footer example first, if there's more than one or two links in the footer, I like to present them as a list:
I’ve given the first three items a class of left
for obvious reasons. The third list item also has a second class, no-border
, because I’m going to use CSS to insert a vertical separator between the links, but I don’t want a separator for the last link because it’ll have a lot of white space to separate it from the next link. (The CSS borders won’t be interepreted by people using screen readers but the use of a list to present the links should be enough to satisify WAI checkpoint 10.5 about separating adjacent links with more than white space.) Likewise, I don’t want a border on the far right link either.
The CSS to go with the above would look like this:
I’ve set the text-align
of the list to right
and then used float: left
on the links I want aligned to the left.
Why not have the text aligned right and float the right list items? Because when things are floated, the items that come first in the source get floated first which means that when things are floated right, the order of the links would be reversed because the last link would be the last floated and would be moved out of position by any links that had been floated before it. I could rewrite my links so that they appeared in the correct order, but CSS is all about presentation v content and this is a presentational issue.
Blog metadata
The same technique can be used for other content not presented in lists. For example, a blog post (like this one) with the date on the left and the link to the comments on the right. The HTML looks like this:
The paragraph is given a class of right
which indicates its text alignment and as in the first example, the date-stamp
span is floated left. The other span is given a class too because in my case both spans have background-image
s associated with them but otherwise, the second span is not really required.
The only downside that I’ve encountered with this method is that IE 5.01 will render list items that are display: inline
with no space between them. Adding a float to them solves this issue, but then, of course, you’re back to the original problem of floating things right. IE5 Mac also has problems so if you’re concerned about the presentation in those browsers, you might find it easier to centre the links rather than splitting them left and right.