title: Force <div> elements onto 2 lines
body: <p>First of all, thanks for taking the time to read this.</p>
  
  <p>I've been working with HTML/CSS for as long as I can remember, but I've come across a problem today which has completely stumped me.</p>
  
  <p>I've got a container , which has a certain number (let's say 8) of dynamically created child divs.  I want the container to display the children on two rows, even if they overflow horizontally.</p>
  
  <p>For example,</p>
  
  <pre>
   ____________
  |            |
  |[1] [3] [5] | [7]
  |[2] [4] [6] | [8]
  |____________|
  </pre>
  
  <p>Then I'm going to use JS to implement a nice scrolling feature.</p>
  
  <p>However, at the moment, I can only get them to display on one line instead of two, by setting them to: <pre>display: inline-block;</pre></p>
  
  <p>Or scrolling vertically, by using a pretty standard: <pre>float: left;</pre></p>
  
  <p>Any advice on this would be very much appreciated!</p>
  
  <p>Chris</p>