title: center align three divs side by side with CSS
body: <p>I've got three <code>div</code>s side by side in a container that sets itself to the width of the user's window.</p>
  
  <p>I want them to stay nested next to each other, and centered as a unit in the dynamic container.<br>
  I'd like to do this <strong>without</strong> putting them into another <code>div</code> (mostly because I have a lot of them in this page as it is).</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="nav_one"&gt;
          &lt;h3&gt;COLLECTIONS&lt;/h3&gt;
          &lt;p style="text-align:justify"&gt;blahblah&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="nav_three"&gt;
          &lt;h3&gt;COLLECTIONS&lt;/h3&gt;
          &lt;p style="text-align:justify"&gt;blahblah&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="nav_two"&gt;
          &lt;h3&gt;COLLECTIONS&lt;/h3&gt;
          &lt;p style="text-align:justify"&gt;blahblah&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#nav_one {
      width: 208px;
      float: left;
      padding: 20px 10px 20px 10px;
      text-align: center;
  }
  
  #nav_two {
      width: 208px;
      margin: 0 auto;
      padding: 20px 10px 20px 10px;
      text-align: center;
  }
  
  #nav_three {
      width: 208px;
      float: right;
      padding: 20px 10px;
      text-align: center;
  }
  </code></pre>