title: Div columns not extending to bottom of content when floated left and right
body: <p>I have two divs/columns. One floated left and the other floated right (it needs to be this way for a responsive design page I'm making). The content of the left div extends far below the viewport/left div, while the right content is shorter and stays well within the viewport/right div.</p>
  
  <p>I need the background colors to expand all the way to the bottom of the left div's content (or right div's content if it was the longer one).</p>
  
  <p>Instead, it's cutting of the background colors/div right at the bottom of the viewport.
  I've tried clears:both's, clearfix, and overflow controls to no avail. I imagine I'm not implementing them correctly for this setup. Can anyone edit my fiddle to show me what I need to do to get them to extend to the bottom?</p>
  
  <p>Here's the fiddle (you'll need to scroll down in the little viewport to see how it cuts off the colors):</p>
  
  <p><a href="http://jsfiddle.net/4C89C/" rel="nofollow">http://jsfiddle.net/4C89C/</a></p>
  
  <p>Here's the code I'm using in the fiddle:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;style&gt;
  
  html, body {height:100%;}
  #content {
      height:100%;
      border:thin solid red;
  }
  #innerdiv {
      height:100%;
      float:left;
      background-color: #eee;
      width: 60%;
  }
  #innerdiv2 {
      height:100%;
      float:right;
      background-color: blue;
      width: 40%;
  }
  #textdiv {
      height: 100%;
      padding-left: 40px;
  }
  #textdiv2 {
      height: 100%;
      padding-left: 40px;
      colo: white;
  }  
  &lt;/style&gt;
  
  
  
  
  &lt;div id="content"&gt;
      &lt;div id="innerdiv"&gt;
          &lt;div id="textdiv"&gt;
  
  Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;
  
                  &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="innerdiv2"&gt;
          &lt;div id="textdiv2"&gt;
  
  Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;Filler&lt;br /&gt;
              &lt;/div&gt;
        &lt;/div&gt;    
  &lt;/div&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>