title: How to fit a list of images in an HTML div to form a 2D grid?
body: <p>EDIT: Problem fixed. See my own answer for details. Will mark it as the answer in 2 days when SO lets me.</p>
  
  <p>I am populating a div with a list of square images using Knockout. The div is currently of fixed width and height, though will eventually be resizeable. I would like the images to fill up the div row by row. So when image n reaches the boundaries of the div's width, image n+1 is wrapped around to the next row. Currently, the images flow over the boundaries of the div to fill the entire window. </p>
  
  <p>The current markup is as follows:</p>
  
  <pre><code>&lt;div data-bind="foreach: images" width="500" height="500"&gt;
      &lt;img data-bind="attr: { src: fileName }"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've played around with <code>float</code> and <code>overflow</code> with no success so far. I've also tried putting the images in their own divs. The images exhibit the wrapping behaviour I want in the whole window to form a grid, just not in the div I've put them in.</p>
  
  <p>How do I make the images stay inside the div while getting the grid that I want? Is this possible with HTML/CSS alone or does it require some Javascript? </p>