title: center three divs side by side
body: <p>I have three divs that I want to center side by side on a page. I also have some content such as <code>&lt;p&gt;</code> and <code>&lt;h3&gt;</code> tags in them</p>
  
  <p>HTML (example)</p>
  
  <pre><code>&lt;div id = "wrapper"&gt;
  
      &lt;div class = "aboutleft"&gt; 
          &lt;h1&gt; About us &lt;/h1&gt;
          &lt;h3&gt; small description &lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio nec 
              A few sentences about you go here 
          &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class = "vline"&gt;&lt;/div&gt;
  
      &lt;div class = "aboutright"&gt;
          &lt;h1&gt; About the shop/Clients &lt;/h1&gt;
          &lt;h3&gt; small description &lt;/h3&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique non odio ne
              A few sentences about you go here 
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.aboutleft
  {
      display:inline-block;
      float:left;
      width: 450px;       
  }
  
  #wrapper
  {
      text-align:center;
      width: 80%;
      margin: 0, auto;    
  }
  .aboutright
  {
      display: inline-block;
      float:right;
      width: 450px;
  }
  
  .vline
  {
      background: rgb(186,177,152);
      display: inline-block;
      float: left;
      min-height: 250px;
      margin: 0 30px;
      width: 1px;
  }
  </code></pre>
  
  <p>The result of this is just the 3 divs all floating mostly to the left. I want to center all three of them on the page. </p>