title: Weird quirk when re sizing columns with css
body: <p>I posted an earlier question about making having columns wrap in a way that utilizes the most space in the viewport, right <a href="https://stackoverflow.com/questions/28822009/re-sizing-columns-with-restriction-in-css">here</a>. Combining some of the answers, I came up with the following <a href="http://jsfiddle.net/jm0kres4/11/" rel="nofollow noreferrer">jfiddle</a>. I will be having a variable number of columns (2-5) and a variable number of words in each column. If you resize the jfiddle window horizontally, you'll notice that the middle column uses a third of the viewport even though there are barely any words in there, essentially leaving empty white space. I wouldn't mind using jquery/js, but I'd like to have the columns more smartly resized.</p>
  
  <p>The current CSS I have is</p>
  
  <pre><code>body {
      padding: 1em;
      display: table;
  
      width: 100%;
  }
  div {
      display: table-cell;
          -moz-column-width:7em;
      -webkit-column-width:7em;
      column-width:7em;
  }
  span {
      display: block;
      width: 5em;
  }
  </code></pre>
  
  <p>The body is the container, and the divs represent the columns, and the spans are the words in each column. The only thing I want to avoid at all costs is having the columns go underneath each other.</p>