title: Floating div issue
body: <p>I have an issue with floating divs. I have a container st to fixed width, and I have child elements inside that which are all div elements. What I want is that, I need two elements to be shown in a row. The code that I wrote is as follows.</p>
  
  <p><em><strong>CSS</em></strong>    </p>
  
  <pre><code>#container
      {
          width: 400px;
      }
      .item1
      {
          width: 180px;
          height: 200px;
          border: 1px solid red;
          float: left;
          margin: 10px 0 0 10px;
      }
      .item2
      {
          width: 180px;
          height: 250px;
          border: 1px solid red;
          float: left;
          margin: 10px 0 0 10px;
      }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;div class="item1"&gt;1&lt;/div&gt;
          &lt;div class="item1"&gt;2&lt;/div&gt;
          &lt;div class="item1"&gt;3&lt;/div&gt;
          &lt;div class="item1"&gt;4&lt;/div&gt;
          &lt;div class="item1"&gt;5&lt;/div&gt;
          &lt;div class="item1"&gt;6&lt;/div&gt;
          &lt;div class="item1"&gt;7&lt;/div&gt;
          &lt;div class="item1"&gt;8&lt;/div&gt;
          &lt;div class="item1"&gt;9&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This can be viewed at <a href="http://jsfiddle.net/9SeKx/" rel="nofollow"><strong>Demo1</strong></a></p>
  
  <p>But what I want is like this <a href="http://jsfiddle.net/9SeKx/1/" rel="nofollow"><strong>result</strong></a>. The only thing is that the height of the individual items can be different.</p>
  
  <p>Hope I have made everything clear. </p>
  
  <p>Thanks in advance</p>
  
  <p><em><strong>Additional clarification</em></strong></p>
  
  <p>The content elements will be generated dynamically in server and will be passed to the client.</p>
  
  <p>Also the order should be like 1,2,3,4,...</p>
  
  <p>The only thing is that in a row there should be two items and the first one should be aligned to the left side of the container.</p>