Menu
I have a page that has what is in effect an ordered list, but I cannot figure out a good way to format it correctly.
It is a list of sessions and descriptions – here is an example:
Session 17: Blah blah blah blah blah blah blah blah blah blah
Sessions 18-19: Blah blah blah blah blah blah blah blah blah blah blah blah
Session 20: Blah blah blah blah blah
Session 21: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
Session 22: Blah blah blah blah blah blah blah blah blah blah
Session 23: Blah blah blah blah blah blah
Session 24: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
The descriptions will be different lengths. Some of the descriptions will fit onto one line, but some will not. For those that do not, I need the 2nd line to be indented so that it lines up with the beginning of the description, not the Session number. Using {text-indent:-2em; margin-left:2em;} or something like it will not work, because the width of the Session number will not be constant, particularly in the Sessions 18-19 line.
Another thought that I had was to put the sessions in one div and the descriptions in another div and line them up next to each other, but I am worried about disconnecting the two, in terms of maintaining alignment and also screwing up the logic of the page.
The third thought that I had was putting this into a table, but I don’t really like that solution either.
Surely someone out there has had a similar problem and can provide a little advice?