title: Float a bunch of divs CENTERED while retaining dynamic width and height
body: <p>I've got a large div. It contains a bunch of thumbnails. I'd like the thumbnails within the div to be centered inside the div, and the div to be centered on the page. But I'd also like the width of the div to be dynamic so you can see all the thumbnails on every resolution, centered. How could I achieve this?</p>
  
  <p>here's what I have so far:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="thumb"&gt;&lt;img /&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;img /&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;img /&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;img /&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;img /&gt;&lt;/div&gt;
      &lt;div class="thumb"&gt;&lt;img /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried centering it with this css:
  The problem is I need an alternative to float:left that works to center so they all float around each other. What I currently have just floats them left so on the wrong browser width, they're not centered.</p>
  
  <pre><code>#container{margin:auto;width:80%}
  .thumb{padding:60px;float:left}
  </code></pre>
  
  <p>Any ideas on how to do something like float:center?</p>