Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
How can I center a nested div?
Old 02-18-2007, 04:41 AM How can I center a nested div?
ForrestCroce's Avatar
Half Man, Half Amazing

Posts: 3,023
Name: Forrest Croce
Location: Seattle, WA
Trades: 0
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!
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
ForrestCroce is offline
Reply With Quote
View Public Profile Visit ForrestCroce's homepage!
 
 
Register now for full access!
Old 02-18-2007, 11:55 AM Re: How can I center a nested div?
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 02-18-2007, 12:08 PM Re: How can I center a nested div?
RanaD's Avatar
Super Talker

Posts: 139
Name: David
Trades: 0
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...

Last edited by RanaD; 02-18-2007 at 12:11 PM..
RanaD is offline
Reply With Quote
View Public Profile
 
Old 02-18-2007, 05:29 PM Re: How can I center a nested div?
ForrestCroce's Avatar
Half Man, Half Amazing

Posts: 3,023
Name: Forrest Croce
Location: Seattle, WA
Trades: 0
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>
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
ForrestCroce is offline
Reply With Quote
View Public Profile Visit ForrestCroce's homepage!
 
Reply     « Reply to How can I center a nested div?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.39382 seconds with 12 queries