title: DIV float:left with another div with display: inline-block wraps
body: <p>I have the following code;</p>
  
  <pre><code>&lt;div id="first" style="float: left"&gt;
  &lt;/div&gt;
  &lt;div id="second"&gt;
      &lt;div id="1" style="display: inline-block;"&gt;
      &lt;/div&gt;
  
      &lt;div id="2" style="display: inline-block;"&gt;
      &lt;/div&gt;
      ......
      &lt;div  id= "n" style="display: inline-block;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that when the content in <code>#second</code> is taller than the content in <code>#first</code>,
  then the child <code>div</code>'s in <code>#second</code> start a new line below <code>#first</code>. </p>
  
  <p>I want them to come below the second div only.</p>