title: CSS: Force float:left for elements within div
body: <p>Not sure if I'm just not seeing the wood for the tree's but I'm trying to force a bunch of DIV's to float left - within a constrained block.</p>
  
  <p>My wrapper is 600px x 600px and within that I have a bunch of DIV's (all, also 600x600) and I'm using jQuery to scroll to each one.  Problem is, they sit underneath each other rather than to floating in a row.</p>
  
  <p>Essentially, I want to scroll horizontally, not vertically.  I'm sure I've solved this before, and maybe I'm having one of those days but I just can't get it today :(</p>
  
  <p>Any pointers appreciated.</p>
  
  <pre><code>&lt;style&gt;
  #parent {width:600px; height:600px;}
  .kids {width:600px; height:600px; float:left;}
  &lt;/style&gt;
  
  ...
  
  &lt;div id="parent"&gt;
      &lt;div class="kids"&gt; ... some content ... &lt;/div&gt;
      &lt;div class="kids"&gt; ... some content ... &lt;/div&gt;
      &lt;div class="kids"&gt; ... some content ... &lt;/div&gt;
  &lt;/div&gt;
  
  ...
  
  &lt;nav&gt;
     &lt;a&gt;{onclick srolls #parent to left:600px}&lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>