title: Two floating columns in container, best way to increase container height to match columns?
body: <p>I've searched at the Stack Overflow and other sources, for example <a href="http://jsfiddle.net/ep57zbug/7/" rel="nofollow">here</a>.</p>
  
  <p>This is the code, I'm talking about:</p>
  
  <pre><code>.container{
          width: 100%;
          height: 100%; /*adjust this manually and no issue*/
          background: #222222;
          margin: 0;
          padding: 0;
  }
  </code></pre>
  
  <p>There is a jsfiddle of the section I'm talking about. If the container is changed to (say) 180%  it solves all because it's made bigger than everything so everything is sitting on top of it.</p>
  
  <p>I have a container which is the parent here and a child called content which has 2 columns in it. When I write too much in the column, it goes over the container as they are both floating. I can change it manually, so once I'm happy with the text just change the height which is OK. But, I don't think this is good practice and I'm sure there is another way that does it automatically by canceling all the floats. I cant get it to work though.</p>