title: How to wrap div elements around another div element
body: <p>This must be an oft-answered question, but my google-foo fails me.
  Take a look at the pretty diagram:</p>
  
  <pre>
  +------------+ +--+
  |    nav     | |  |
  +------------+ |s |
  +--+ +--+ +--+ |i |
  |:)| |:)| |:)| |d |
  +--+ +--+ +--+ |e |
                 |  |
  +--+ +--+ +--+ |  |
  |:)| |:)| |:)| |  |
  +--+ +--+ +--+ +--+ 
  
  +--+ +--+ +--+ +--+
  |:)| |:)| |:)| |:)|
  +--+ +--+ +--+ +--+
  </pre>
  
  <p>It represents a container in which there's a nav div, a sidebar div and lots of little divs containing images and text.</p>
  
  <p>What I'm trying to achieve is, no matter the height of the sidebar, the image divs will appear in nice rows with as many columns in a given row as will fit.  They'll nicely wrap under the sidebar.</p>
  
  <p>I've tried a million different ways, but the image divs either start below the bottom of the sidebar or else row 2 will have 3 divs and then a fourth, pushed down by the sidebar.</p>
  
  <pre>
  +------------+ +--+
  |    nav     | |  |
  +------------+ |s |
  +--+ +--+ +--+ |i |
  |:)| |:)| |:)| |d |
  +--+ +--+ +--+ |e |
                 |  |
  +--+ +--+ +--+ |  |
  |:)| |:)| |:)| +--+
  +--+ +--+ +--+ +--+
                 |:(|
                 +--+
  +--+ +--+ +--+ +--+
  |:(| |:(| |:(| |:(|
  +--+ +--+ +--+ +--+
  </pre>
  
  <p>Am I missing something obvious? Is this even possible and, if so, how?</p>