title: CSS Issue - Columns Resize Automatically When Browser Window Shrinks/Enlarges
body: <p>Hopefully this will be an easy question to answer - it is puzzling me tremendously:</p>
  
  <p>I have designed my page with Pinterest in mind - separating the main content into columns.  I have specified the columns as follows:</p>
  
  <pre><code>#Content {
  width: auto;
  margin: 0px auto;
  
  -moz-column-count:auto;
  -webkit-column-count:auto;
  column-count:auto;
  
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  column-gap: 20px;
  
  -moz-column-width: 294px;
  -webkit-column-width: 294px;
  column-width: 294px;
  }
  
  #Body {
  width: 100%;
  }
  </code></pre>
  
  <p>When resizing the browser, the number of columns increases and decreases to fit the screen.   However, both the left and right columns are flat against the side of the screen - the gaps between the columns remains steady at 20px - but the width of each column increases to fill the remaining gaps.</p>
  
  <p>Is there a way that I can get it like Pinterest - where the gaps between the columns remains fixed and the column width remains fixed - while the margin on the left and right of the content varies?</p>