Topic: Center, damn you!

Hey guys. As I've been learning about web standards etc, I've been in the process of converting my photo gallery application to XHTML 1.1/CSS2.1, and trying to get rid of all structural tables. I'm currently working on what I think is the most difficult page - the one that displays the thumbnails for a "roll". What I'm trying to do is float each thumbnail and its caption left so that I don't have a fixed number of thumbnails per row, but they can flow fluidly based on the width of the browser. That works, but I can't figure out how to get it centered in the browser. I've wrapped all of the thumbnail divs in a container div, but that div expands to fill its container (the main content div), rather than shrinking down to the size of however many thumbnails fit on a row. I imagine if I could get it to shrink down to that size, then centering it would be no big deal. But I'm new to this, so there may be a different approach that is better that I'm not aware of, so feel free to suggest any method which will result in the thumbnails being centered in the browser window Here is the static copy I'm working on:

http://binrock.net/cowgod/photos/roll.html

and the CSS, to save you the trouble of having to get it from the source:

http://binrock.net/cowgod/photos/pg2.css

Any help would be greatly appreciated.

BTW, for reference, the current, non-standards-compliant version of the gallery is just http://binrock.net/cowgod/photos/ .

I have to admit that I'm not 100% clear on what you're trying to do. This part in particular confuses me:

quote:

---

I've wrapped all of the thumbnail divs in a container div, but that div expands
to fill its container (the main content div), rather than shrinking down to the
size of however many thumbnails fit on a row.

---

Just to get some clarification, is this the sort of thing you're looking to do?

thumbnails

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | Hooray for linguistic idiots and yak milk!

Sorry, I suppose that wasn't very clear. Yes, that link is almost exactly what I'm trying to do, except I'd like to have a caption underneath each image as well. I'll look at it and see if I can glean any usefil techniques from it.

Let me show you what I'm trying to do with screenshots. Here is how it looks now, at 1152x864 in Firefox in Windows (note, the screenshot is about 480k):

http://binrock.net/cowgod/photos/pg-current.png

And here is how I'd like it to look (this is photoshopped):

http://binrock.net/cowgod/photos/pg-correct.png

Each thumbnail and its caption are encased in a div of class thumbnail, and each of those divs has float: left. This makes them align themselves to the left of their containing element, of course. All of the thumbnails together are contained in another div with id="roll-thumbnails", but it doesn't have any styles associated with it at the moment. div#roll-thumbnails currently expands to fill the width of its containing element, as you can see here:

http://binrock.net/cowgod/photos/pg-outlined.png (640x480, 210k)

I thought that if I could cause div#roll-thumbnails to shrink down to just the width of however many thumbnails fit on one row, then it wouldn't be very difficult to center the div (just give it margin: 0 auto and text-align: center for its containing element). But I don't know how to make it shrink down like that. I gave it width: auto but it has no effect (I've given it a red 1px border for now just to clearly see its dimensions). Maybe this isn't the best way to achieve what I want - if anyone has any other ideas, please share. I'm open to any ideas that will accomplish my goal of getting the thumbnails centered and yet still liquidly flowing down to the next line if the browser were resized. Thanks for your help.

BTW, this:

http://www.liminality.org/imagery/experimental/4/

is an awesome picture. Digital SLR's and everything are nice, but point-and-shoots can yield very good photography if the user has an eye for composition. I like your photos.

Ah, OK, I see what you're trying to do now... and I can see how that would be frustrating. It looks like it should be very simple, but I'm gathering it isn't. The reason my method works is because the thumbnails are centered--the containing div still expands to fill its parent element. You want them aligned to the left, yet you still want full rows to be centered, and you want it to be fluid....

Hmm... I'm trying to think of an easy (ie, doesn't require lots of extraneous markup) way to do this, but I'm not coming up with anything. Maybe you need to do something unconventional, like mess around with the left margin or something. Heh, I probably couldn't be more unhelpful if I tried.

What I would really need to do is code a mockup and mess around with it myself, but unfortunately I don't have the time for that at the moment. Wish I could be of more help. If I do think of anything, I'll let you know. Sorry.

Oh, and thanks for the compliment on the photo. I'm no professional photographer, but I do like to point and shoot, and occasionally I get lucky.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | Hooray for linguistic idiots and yak milk!