title: Why "height: auto;" doesn't work when i use "float:left"?
body: <p>i have three responsive columns, and i want to add a wrap div for those divs.</p>
  
  <p>i already created this wrap div, but it only works with pixel values, and i dont want to use pixels because i'm trying to build a responsive layout, it would be great if i could use percentages or auto.</p>
  
  <p>example: if i put height: 300px, it works, but if i use height: auto; or height:30%; it doesn't work.</p>
  
  <p>I know that it doesn't work because i'm using float left.</p>
  
  <p>Why this happens? Is there other way to do that?</p>
  
  <p>css</p>
  
  <pre><code>#offerinformations {
      width: 290px;
      float: left;
      padding: 5px 15px;
  }
  
  #offerlogo {
      width: 294px;
      float: left;
      padding: 5px 15px;
      margin: 0px 5px 5px 5px;
  }
  
  #offerbtns {
      width: 270px;
      padding: 5px 15px;
      float: left;
  }
  
  #offers{
  color:white;
  background-color: #262627;
  border-left: 5px solid #f15c5c;
  height: auto;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="offers"&gt;
  &lt;div id="offerinformations"&gt;
          &lt;h2&gt;Informations&lt;/h2&gt;
          &lt;p&gt;This page demonstrates a 3 column responsive layout.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="offerlogo"&gt;
          &lt;h2&gt;Logo&lt;/h2&gt;
          &lt;p&gt;This page demonstrates a 3 column responsive layout.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="offerbtns"&gt;
          &lt;h2&gt;Buttons&lt;/h2&gt;
          &lt;p&gt;This page demonstrates a 3 column responsive layout.&lt;/p&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>