title: Layout issue with HTML and CSS - Cannot move div snuggly to new position due to height of other elements
body: <p>I'm struggling with the layout of my HTML</p>
  
  <p>It currently looks like, which is desired:</p>
  
  <p><img src="https://i.stack.imgur.com/wx1f3.png" alt="enter image description here"></p>
  
  <p>However, it is possible that more text will be addled to the middle right box (the one starts with "I will grow with content"). When his happens, I'd like the bottom right box (the one starting with "The important bit") to appear snuggly under the left menu.</p>
  
  <p>The issue I have is although it moves under the left menu, it is not snug.</p>
  
  <p>Within the JSFiddle below, there is a line of comments, if you uncomment it, you'll see the issue (screen shot). As you can also see, I'd like the box to start as shown by the blue arrow.</p>
  
  <p><img src="https://i.stack.imgur.com/Rdo5M.png" alt="enter image description here"></p>
  
  <p>JS FIDDLE : <a href="http://jsfiddle.net/uC6dH/1/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;div class="myContainer"&gt;
    &lt;div class="box"&gt;
      &lt;p&gt;Left menu&lt;/p&gt;
      &lt;p&gt;Left menu&lt;/p&gt;
      &lt;p&gt;Left menu&lt;/p&gt;
      &lt;p&gt;Left menu&lt;/p&gt;
      &lt;p&gt;Left menu&lt;/p&gt;
      &lt;p&gt;Left menu&lt;/p&gt;
      &lt;p&gt;Left menu&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;p&gt;My heading - fine as is, a fixed size based upon content&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;p&gt;I will grow with content in some situations! If I get really big (greater height), then the box below (called important bit) should fit snuggly under Left menu&lt;/p&gt;
      &lt;p&gt;&lt;!--I am more content which is not predicatble... Ha ha ha ha ha, I have destroyed this wonderfully layout design. Next step, the world! --&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="box"&gt;
      &lt;p&gt;The important bit. I want to appear under left menu, but I don't. There is a big old margin between me and the Left menu &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong>     </p>
  
  <pre><code>.myContainer
  { 
      width:420px;
      float:left;
  }
  
  .box{
      float:left;
      border:solid;
      width:200px;
  }
  </code></pre>
  
  <p>Can this be done with only HTML and CSS (meaning, no JS/Jquery/scripting language of any sort etc)? </p>