Float DIV inside Container

[barkster]

I'm floating some thumbnail div's inside a container div and I want the container to be the width of the last thumb div on the screen and not the width of the screen how can I do this?  I'd also like the container div centered on the screen. I'm terrible with div's and css floating.  Thanks

 

.thumb {

background-color:#9C6;

width:150px;

float:left;

text-align:center;

padding:3px;

margin: 0px 5px 5px 0px;

font-size:11px;

}

.pager {

margin:5px;

padding:3px;

background-color:#CC6;

text-align:center;

font-size:.75em;

}

#gallery {

margin:5px;

text-align: center;

}

#thumbs {

margin:0 auto;

text-align:center;

}

 

<div id="gallery">

<div id="thumbs">

  <div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000452787.jpg"><br>Original Size: 98 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000462788.jpg"><br>Original Size: 109 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000472789.jpg"><br>Original Size: 171 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000482790.jpg"><br>Original Size: 154 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000492791.jpg"><br>Original Size: 97 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000502792.jpg"><br>Original Size: 137 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000512793.jpg"><br>Original Size: 94 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000542794.jpg"><br>Original Size: 40 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000562795.jpg"><br>Original Size: 96 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000572796.jpg"><br>Original Size: 107 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000582797.jpg"><br>Original Size: 112 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000592798.jpg"><br>Original Size: 143 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000602799.jpg"><br>Original Size: 143 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000612800.jpg"><br>Original Size: 198 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000622801.jpg"><br>Original Size: 166 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000632802.jpg"><br>Original Size: 140 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000642803.jpg"><br>Original Size: 168 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000652804.jpg"><br>Original Size: 159 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000662805.jpg"><br>Original Size: 160 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000672806.jpg"><br>Original Size: 119 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000682807.jpg"><br>Original Size: 179 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000692808.jpg"><br>Original Size: 123 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000702809.jpg"><br>Original Size: 120 kb</div>

<div class="thumb"><img src="display_thumb.php?id=1&t=n&fname=DSC000712810.jpg"><br>Original Size: 122 kb</div>

    <div style="clear:both"></div>

    </div>

    <div style="clear:both"></div>

    <div class="pager">

        <span class="boxes"><a href="/beta/gallery.php?&page=1">First</a>

 

<a href="/beta/gallery.php?&page=1">prev</a>

<a href="/beta/gallery.php?&page=1">1</a>

<span class="current">2</span>

<a href="/beta/gallery.php?&page=3">3</a>

<a href="/beta/gallery.php?&page=4">4</a>

<a href="/beta/gallery.php?&page=5">5</a>

<a href="/beta/gallery.php?&page=3">next</a>

<a href="/beta/gallery.php?&page=10">Last</a>

</span>

    </div>

 

</div>

 

[dropfaith]

on gallery  add margin:0 auto; will center that div i think you need a width too

 

i dont really understand your other issue

[barkster]

yeah now that I think about it without a fixed width then it really won't do what I'm trying to do.  Since it is 100% then if the last thumb doesn't quite fit then it make it look uncentered.  I guess that is what I was really trying to fix.  I guess what I'm saying is I want the container hold the thumbs to grow to fit the number of thumbs.  Maybe I should just stick in a table?

[dropfaith]

you could set all your thumbs to a width say you have 5 thumbs go with like 20% and such then they flex with the page

[barkster]

yeah but I as trying to have it fill the page as the width increased but I may just move to that cause it looks better.  Thanks for the help