It seems like you should be able to, but I'm having trouble doing it. I've been trying to decide whether to keep the info I have under each photo in tables, which was convenient, or to do it with CSS instead. It's not really tabular data, though, at least not in the relational database sense, so it kind of seems like CSS would be more appropriate.

The nice thing about a table is fixed column widths, but that seemed like it should be pretty easy to mimic, and with a lot less ( and cleaner ) markup. This is my attempt:

<span class="photoInfoLabel">Location:</span>
Pike's Place, Downtown Seattle, Washington<br />
<span class="photoInfoLabel">Date:</span>
January 4, 2007<br />

With this rule:

.photoInfoLabel {
    margin-left:15px;
    width:125px;
    font-weight:bold;
}

Unfortunately, the spans are exactly as wide as they need to be to house the text, regardless of the browser. I tried display:inline-block, but that didn't do the trick. I guess I could use divs instead of spans, and float everything to the left, but that seems like overkill? I don't think this is a situation where a table would be more appropriate?

By way of example, this Bryanna is table based and Star Trails is CSS, but apparently bad CSS.

Thanks for any light you can shed on this!

Tough call, dude.

If it were me personally, I might modify something like this: http://web-graphics.com/mtarchive/001622.php

Well mate, it looks like you got it working, but it also looks like you gave up and used divs. I think that's the proper way to go, spans are supposed to size themselves as small as possible to only contain whatever text is inside of them.

Page looks great, by the way.

PS - That little trick you're doing, the see-through background behind the text, it looks like $h!t using your mortal enemy, Internet Explorer 6. Try this code below, in your CSS:

filter:alpha(opacity=20);
background-color:Black;

Only I think you were using some flavor of gray. Just change the background color according to your taste, and the opacity, too. But this is working code to show you how to actually do that.

Well, maybe "working code" is a bit of a stretch. It's a proprietary IE hack. And it's also an ActiveX control, so it won't work on servers. But it's built into IE, so your visitors won't have to download anything else to view your site.

Have you tried adding this CSS:

display: block;

Hope that helps... but it seems you went and used divs.

-Brett