I am a volunteer webmaster for a couple of churches, and on one site all pages have a header div across the top, and below that a navigation div floated left with main content div flowing to its right.
One page lists parish events of which we have photos and/or video elsewhere on the site. Currently, I just describe those events in paragraphs with links to pages with the photos/video. It works, but I recently decided it would be both more visually interesting and more helpful to put an illustrative photo to the left of the description of each event. So instead of just paragraphs, I set up a <dl> with a series of list items each of which is as follows: <dt>title</dt> <dd>image file</dd> <dd>text about the event</dd> and used CSS to format it, floating the <dd>s with an img to the left, allowing the other <dd>s with the descriptive text to flow to the right, and I put a clear float in the <dt> to separate them, because there wasn't always enough text to prevent the next list item from stacking to the right of the previous one. I could probably fine-tune the formatting a bit, but basically it does what I want. The problem is that when I clear the <dt> it clears the previously left-floated navigation div, which forces the entire <dl> below that, which I don't want! I tried floating the images right and clearing right on the <dt> which indeed solved that problem, but unfortunately it just looks a whole lot better to me with the images at the left. I have the old/current version with just paragraphs, here: http://www.holycrossoca.org/phot/photos.html And the newer one I'm working on here (with just 2010, so far, in the "new" format): http://www.holycrossoca.org/phot/photos2.html And the newer one with the images floated right and cleared right here: http://www.holycrossoca.org/phot/photos4.html I could easily do this with a table, and I suppose I could convince myself that it's semantically tabular in that the rows are events, the left column is image data and the right column is text data of the event constituting each row. But I'd rather use CSS to format this. I confess that I'm "scared" of using absolute or relative positioning because in lurking on this list, gosh it seems like even the professionals have trouble making those things work right, but by all means I'll consider all options. Do you have any suggestions? Many thanks! Theophan ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
