title: Keep CSS3 Multicolumn Width Static
body: <p>I'm trying to create a layout that would most easily be described as a horizontally scrolling pinterest.</p>
  
  <p>As in, I have items that would stack up against the previous one, and instead of extending top to bottom, it goes left to right.</p>
  
  <p>So far it looks like the CSS3 multicolumn property is exactly what I want. Only problem I have is that the width is flexible (despite declaring column-width). Different browser windows render different sized columns.</p>
  
  <p>Currently use:</p>
  
  <pre><code>.multicol {
      -webkit-column-width: 150px;
      -webkit-column-gap: 0;
      height: 400px;
      width: auto;
  }
  </code></pre>
  
  <p>Example of my problem (resize window to see width change): <a href="http://jsfiddle.net/pbg3r/4/" rel="nofollow">http://jsfiddle.net/pbg3r/4/</a></p>
  
  <p>Is there a way to keep the width fixed? I just want columns of Xpx width, and as more are added, the page is extended horizontally as needed.</p>
  
  <p>The w3 spec says the only way to keep it fixed is for "all length values (in horizontal text these are: ‘width’, ‘column-width’, ‘column-gap’, and ‘column-rule-width’) must be specified."</p>
  
  <p>Though I'm not sure how to give the container a set width and keep the ability to continuously expend horizontally. And even when I do, it still doesn't guarantee the set width.</p>
  
  <p>Any way to guarantee a width of Xpx for each column?</p>
  
  <p>Thanks for any help.</p>