title: CSS: Why do using float: left break the height of the div?
body: <p>I have two divs those are supposed to have the same height. So I am using <code>display: table</code> on the container and using <code>display: table-cell</code> in the child divs. However these childs are using a common .css file which contains <code>float:left</code> in it. On the firebug, when I remove this <code>float:left</code> everything seems working as it is intended. I spend hours but I couldn't find the answer by my self.  </p>
  
  <p>The real example is more complex but here is an example.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    float: left;
    min-width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 75%;
  }
  
  .panels {
    width: 100%;
    height: 90px;
    display: table;
  }
  
  .panel-left {
    width: 75%;
    padding-right: 0.5%;
    padding-bottom: 10px;
    height: 100%;
    display: table-cell;
    background-color: #124458
  }
  
  .panel-right {
    width: 25%;
    padding-bottom: 10px;
    height: 100%;
    display: table-cell;
    background-color: #456845
  }
  
  .height {
    height: 100%;
  }
  
  .box {
    height: calc(100% - 10px);
    box-sizing: border-box;
    margin-bottom: 10px;
    min-width: 100%;
    float: left;
  }
  
  .box-title {
    border-radius: 10px 10px 0 0;
    background-color: white;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
    padding: 5px 15px;
    color: #003278;
  }
  
  .box-inside {
    height: calc(100% - 20px);
    box-sizing: border-box;
    background: #f3f6f9;
    border-radius: 0 0 10px 10px;
    padding: 10px 15px;
    float: left;
    min-width: 100%;
    color: black;
  }
  
  form {
    margin-top: 8px;
    background: #f3f789;
    height: 20px;
  }
  
  table {
    width: 100%;
    border-spacing: 0 0;
    white-space: nowrap;
    border-collapse: collapse;
    color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="panels"&gt;
      &lt;div class="panel-left"&gt;
        &lt;div class="height-100"&gt;
          &lt;div class="box"&gt;
            &lt;div class="box-title"&gt;
              LEFT PANEL
            &lt;/div&gt;
            &lt;div class="box-inside"&gt;
              &lt;form&gt;
                &lt;table&gt;
                  &lt;button&gt;
                      &lt;/button&gt;
                &lt;/table&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel-right"&gt;
        &lt;div class="height-100"&gt;
          &lt;div class="box"&gt;
            &lt;div class="box-title"&gt;
              RIGHT PANEL
            &lt;/div&gt;
            &lt;div class="box-inside"&gt;
              &lt;span&gt;STATUS&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is a bit different but very close to my case. </p>
  
  <p>On my screen I see this:</p>
  
  <p><a href="https://i.stack.imgur.com/UrGBe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UrGBe.png" alt="enter image description here"></a></p>
  
  <p>Also, when I checked the example with <code>display:table</code> and <code>display:table-cell</code>, I see that no one else is using <code>float left or right</code>. However I have to have it since it comes from the common css and other components are using it.</p>