I can't believe I'm having so much trouble ... this should be really simple. I've been "renovating" my site, moving away from tables, font tags, and a less attractive design, although I'm still working on that last one.

Anyway, my Rocky Mountain gallery is almost the way I want it. Each thumbnail and caption is in its own div, and some of these are nested because, while the "flowiness" of not using a table is great, I think the thumbs look better in a grid. Most of the images are 8x12, but some are 8x10, or narrower. These get a normal sized container div so they line up. Anyway, on this page, Glacier National Park and Waterfall, US 550 ( I should come up with a better title ) won't center, and I can't figure out why.



Both are set to margin:0pt auto; text-align:center; in CSS. The thumb itself is set to float:left - I commented this out and didn't see any difference, so I'll probably get rid of it. But how do I get the thumb and the to center within it's parent galleryCell div?

Thanks!

Ok, the Glacier National Park page is still all tables.

On the Waterfall page, I don't see any galleryCell div at all, just an <img> stuck in the #pageContainer.

Two suggestions: set #pageContainer to position: relative
Then use text-align: center on #pageContainer
Give your divs a width, and use margin: 0 auto to center - but you'll need text-align: center on the parent div to make IE center anything.

Hi Croce,

I think you need to wrap your thumbs in a container div. At the moment, they correctly go left once your navigation ends. Thus, wrapping them in a div that will be forced to the right even after the navigation ends, they'll stay where you want them.

Or what the lady said...

I'm sorry ... I must have explained this wrong. I managed to break a lot of my pages somehow, so most of them Dreamweaver won't recognize. I updated my template to be divs only, but now I'm having to go back by hand and fix most of the photo pages ( and there are ~140 of them ) to get rid of the tables.

Actually it's the Rocky Mountains page I'm having trouble with. Most of the thumbs are 250x167 px, but the two I embedded above are a little narrower. I'm putting each of them in a div that's 250 px wide, but trying to get them to be centered within it, without having to resort to a calculator and margins.

Thanks for the advice so far, though - both of you pointed out some things I should change. Making my container div relative ( I'm not sure why I set absolute - probably experimenting in the beginning ) sounds like a good idea, and Rana D is probably right, that the galleries would look better if they didn't wrap under the nav. So thanks!

This is the markup I've tried:

<div class="galleryCell">
<div class="galleryCell810p">
<a href="../Photos/IronHorseWaterfall.html">
<img src="../Thumbs/IronHorseTrail.jpg"
alt="Iron Horse State Park" class="thm810p" /></a>
<a href="../Photos/IronHorseWaterfall.html">Iron Horse Trail </a>
</div>
</div>