title: How to center two columns using CSS without using a fixed width container?
body: <p>I have seen <a href="https://stackoverflow.com/questions/14814745/how-to-center-two-columns-using-css">this thread</a> which answers how to center two columns given that you know the total width of both columns in pixels. What if I don't know that or don't want to hard code that? If I at any point want to change the width of the columns I need also to recalculate the with of the wrapper manually. It goes against <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself" rel="nofollow noreferrer">the DRY principle</a> and reduces maintainability.</p>
  
  <p>So this is the example code. How do I modify it to get the two columns centered on an arbitrary-sized screen without specifying the total container width in pixels? (This code doesn't center at all)</p>
  
  <pre><code>&lt;html&gt;
      &lt;style&gt;
          .column {
              width: 100px;
              float: left;
              border: 1px green solid;
              margin: 10px;
          }
          .container: {
              margin:auto;
          }
      &lt;/style&gt;
  &lt;/html&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="column"&gt;qwerty&lt;/div&gt;
          &lt;div class="column"&gt;asdf&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>