title: Fluid, flexible and scalable tiles to fill entire width of viewport
body: <p>I am trying to create fluid and flexible "tiles" for a website, that span across 100% of the viewport of the browser. However, I would like them to scale a bit if needed to eliminate all white space if a the next tile doesn't fit.</p>
  
  <p>A normal div tag with a min-width &amp; min-height of 200px, set to "display: inline-block" gets me most of the way. As I expand the browser window, the boxes will move up to the top line if there is room for another.</p>
  
  <p>My problem is when there isn't room for the next div, there is whitespace on the right. Instead of that, I want each div to 'scale up' to fix the full width of the line.</p>
  
  <p>So if the browser was set to 675px, instead of having 3 divs at 200px, there would be 3 at 225px. But if you then resize the browser to 800px, then there would be 4 divs of 200px.</p>
  
  <p>Sorry if that is hard to understand. Essentially, I am trying to mimic how <a href="http://pulse.me" rel="nofollow">http://pulse.me</a> displays their articles. </p>
  
  <p>I would like to do this in pure CSS if at all possible, but I suspect for the window resize at least, some javascript will be needed. Any thoughts? </p>