Skip to content

Tyssen Design — Brisbane Tyssen Design logo

[email protected] (07) 3300 3303

Content bookends

By /

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:


<ul>
  <li class="left">© 2006 Company name</li>
  <li class="left"><a href="#">Site Map</a></li>
  <li class="left no-border"><a href="#">Privacy Statement</a></li>
  <li><a href="http://validator.w3.org/check/referer">HTML</a></li>
  <li class="no-border"><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
</ul>
								

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:


#footer ul { text-align: right }
#footer li {
  display: inline;
  padding: 0 0.5em;
  border-right: 1px solid #333;
}
#footer li.left { float: left }
#footer li.no-border { border: none }
								

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:


<p class="right">
  <span class="date-stamp">Tue, Sep 4, 2006 @ 8:39 am</span>
  <span class="com-link"><a href="#" title="Comment on...">0 comments</a></span>
</p>
								

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-images associated with them but otherwise, the second span is not really required.

View the completed examples.

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.

Like to say hello? Give us a call on (07) 3300 3303, send us an email to enquiries@tyssendesign.com.au, or a message by filling in the form below.