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
<div>
<h?>Concert: </h?>
<p>“Rockin Beethoven”</p>
</div>
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.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
dl,dt,dd{margin:0;padding:0}
dl {
width:100%;
line-height:1.2;
text-align:center;
}
dt{font-weight:bold;}
dt, dd {
margin:0 1% 7px 0;
width:49%;
display:-moz-inline-box;/* ff2 inline-block*/
display:inline-block;
text-align:right;
vertical-align:top;
}
* html dt,* html dd{display:inline}/* ie6 fix for inline-block*/
*+html dt,*+html dd{display:inline}/* ie7 fix for inline-block*/
dd {
text-align:left;
margin:0 0 7px;
vertical-align:bottom;/* change to vertical-align:top to align at top */
}
</style>
</head>
<body>
<dl>
<dt>Concert:</dt>
<dd>"Rockin Beethoven"</dd>
<dt>Performed by:</dt>
<dd>Honors Band</dd>
<dt>Location:</dt>
<dd>Our School <br />
Main Auditorium<br />
1250 Cactus Boulevard<br />
Tempe, AZ</dd>
<dt>Date:</dt>
<dd>May 7, 2011</dd>
<dt>Cost:</dt>
<dd>$20</dd>
<dt>RSVP:</dt>
<dd>Call Mary at (480) 555-1212 </dd>
<dt>Lorem ipsum<br />
over 3 lines<br />
or more:</dt>
<dd>Lorem ipsum</dd>
<dt>Concert:</dt>
<dd>"Rockin Beethoven"</dd>
</dl>
</body>
</html>
I think a table is also a viable solution for this data also.
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.
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.
