Some more CSS questions

[Brand]

I have another CSS question. I have three items a name, a location, and a date that all should be on one line.

It should kind of like this:
http://img480.imageshack.us/img480/4616/picture2ea0.png

I wanted to know what would be the best way to go about this. It will be something very variable because it will be linked to a database with a number of different names, places, and dates.

I want the location to be always centered between the person and date, but with different lengths that will be happening I'm not sure if that is feasible.

Also Would it be best to do these as three separate divs or do it as a list?

Thank you everyone with your help so far.

[Buzz]

In order to always center the middle content, I'd use divs.


<div class="container">
<div class="cont_r">2/15/07</div>
<div class="cont_l"><em>Jean Friedman</em></div>
New York
</div>

<div class="container2">
<div class="cont_r">2/23/07</div>
<div class="cont_l"><em>Bob Marley</em></div>
Boise
</div>


And the CSS


.container, .container2 {
display: block;
width: 40em;
padding: .5em;
margin: 0 auto;
clear: left;
background-color: #eeeeee;
color: #333;
text-align: center;
}

.container2 {
background-color: #dddddd;
}

.cont_r {
float: right;
display: block;
width: 4em; /*set a width wide enough to hold the longest string */
text-align: left;
}

.cont_l {
float: left;
display: block;
width: 8em; /*set a width wide enough to hold the longest string */
text-align: left;
}


See it here (http://www.weichertcreative.com/test/items.htm)

Untested in IE/Win

[Brand]

This is going to be a database driven news site, and so there are going to be many authors and so I can see having many .container# but what happens when I've planed for up to certain number and they go over that? Is there some way to get around it?

Once again thanks for your help, I'm having a be of a time getting used to css. I'm sorry I have so many questions.

[Buzz]

If it's database driven, you're probably using asp or php. With php it's a simple loop with only the need to code one container div. Truncating the display or paginating it is a function of the server side scripting and query, not CSS.


<?php
$result = mysql_query("SELECT * from sometable ORDER BY dtm DESC");

while ($row = mysql_fetch_array($result)) {
$name = $row['uname'];
$where = $row['location'];
$dtm = $row['dtm'];

if($col %2 == 0) { $color='class="container" '; } else { $color='class="container2" '; }
echo '<div '.$color.'>
<div class="cont_r">'.$dtm.'</div>
<div class="cont_l"><em>'.$name.'</em></div>
'.$where.'
</div>';

$col++;
}
?>

No worries about the questions Brand. That's why we're here.

[Brand]

Thank you for all the help.