Best way to style Event Info

I am doing a website for a local school, and need help figuring out the best way to use CSS to get the desired effect.

I want to display an upcoming concert.

The “look” I’m going for is…

  • Two columns
  • Left Column is bold, right-aligned and has Labels
  • Right Column is normal, left-aligned, with Info

Here is the information…

Concert: “Rockin Beethoven”

Performed by: Honors Band

Location: Our School
Main Auditorium
1250 Cactus Boulevard
Tempe, AZ

Date: May 7, 2011

Cost: $20

RSVP: Call Mary at (480) 555-1212

Historically you would use an HTML Table, but I’d like to try this using CSS2 with no tables involved!! (I think I saw a Form similar to this in one of my SitePoint books that I don’t have handy?!)

As always, it should work in any browser from IE 6 and up.



Should it look like the main part of this page?
definition list

If you float the dt’s left, and simply give the dd’s a left margin equal to a hair more than the width of the dt’s, then your dd’s (descriptions) can be several lines long.
Dt’s have to clear floats above them.

If there’s a dt and the associated dd is empty, you must put some kind of content inside it. We use a space character (& #160; ). Otherwise the next dd in line will happily ride up and things won’t align properly.

Or, if you don’t like DL’s (some people would argue they really must be restricted to actual dictionary definitions, even though the W3C never demanded such a thing), you could possibly get away with
<h?>Concert: </h?>
<p>“Rockin Beethoven”</p>

sets (div’s really optional anyway, but I dunno if your info every gets really weird. If it’s really always the sort of lengths like you posted, div not needed).

h? is floated left and set width like the dt solution, while p is at least given a left margin equal to width of dt.

One thing to watch out for in both of these possible solutions is, the thing on the right (p or dd) if you’re giving it a margin, also giving it something that triggers Haslayout (such as setting dimensions) will make IE give you radically different results. You could float the p/dd’s left or right instead of using a margin for cross-browser consistency, but if this info stays pretty simple then you can get away with setting no dimensions on the right-side thing.

I definitely would NOT use two divs, one with all the left-hand stuff and the second with all the right hand stuff, and both floated. You certainly want the source order of the text to make sense whether CSS is applied or not. (just in case someone suggests this)


Using a definition list as Mallory mentioned above I would use display:inline-block instead of floats and then either dt or dd can run to multiple lines and still line up unlike floats.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
dl {
dt, dd {
    margin:0 1% 7px 0;
    display:-moz-inline-box;/* ff2 inline-block*/
* html dt,* html dd{display:inline}/* ie6 fix for inline-block*/
*+html dt,*+html dd{display:inline}/* ie7 fix for inline-block*/
dd {
    margin:0 0 7px;
    vertical-align:bottom;/* change to vertical-align:top to align at top */
    <dd>"Rockin Beethoven"</dd>
    <dt>Performed by:</dt>
    <dd>Honors Band</dd>
    <dd>Our School <br />
        Main Auditorium<br />
        1250 Cactus Boulevard<br />
        Tempe, AZ</dd>
    <dd>May 7, 2011</dd>
    <dd>Call Mary at (480) 555-1212 </dd>
    <dt>Lorem ipsum<br />
        over 3 lines<br />
        or more:</dt>
    <dd>Lorem ipsum</dd>
    <dd>"Rockin Beethoven"</dd>

I think a table is also a viable solution for this data also.

No, Dutch doesn’t work for my intended audience. :stuck_out_tongue:

Yes, that was the basic look I was going for on this.


That is what I ended up doing.

You are right, it was legitimate since it is tabular data and not for layout.

But I just tend to shy away from tables after coming over to the CSS side.

Stomme’s solution looks cool, though.

Will have try it out.

Thanks guys!!


Just for interest I put my inline block version online here as I think its’ quite neat and not somethig that floats can do. It won’t work in FF2 or equivalent though unless the mark up is change a lot. Works in IE6+ and all other modern browsers.

You never disappoint, Paul.

It looks great!! (And such simple markup too!!) :tup:

So, why should someone do it the CSS way versus using a table?

Both ways are semantically legitimate, and both yield good results with little effort.


I personally don’t consider tables when they are just two columns most of the time, but it’s certainly a grey area and using a table here certainly wouldn’t be a layout table (the rows’ TDs certainly have a semantic relationship with each other).

If you do use a table, though, I’d have the left-hand-stuff be th’s rather than td’s, since they are “heading” the information on the right. This would also make the information make a little more sense in a screen reader.

Yes what Mallory said. :slight_smile:

That’s exactly what I did.

When the swelling in my arm goes down, I’ll likely retool things Paul’s (and Stomme’s) way.

I just can’t get enough of good CSS!!! :smiley:

Thanks again guys (and gal),



Is that “kitty code”, Stomme? :slight_smile:



Here’s a smiling japanese bunny:


Someone has too much time on their hands!! LOL



May want to add microdata as well.
Events - Webmaster Tools Help