CSS: Why do using float: left break the height of the div?

Question

I have two divs those are supposed to have the same height. So I am using display: table on the container and using display: table-cell in the child divs. However these childs are using a common .css file which contains float:left in it. On the firebug, when I remove this float:left everything seems working as it is intended. I spend hours but I couldn't find the answer by my self.

The real example is more complex but here is an example.

.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;
}

<div class="container">
  <div class="panels">
    <div class="panel-left">
      <div class="height-100">
        <div class="box">
          <div class="box-title">
            LEFT PANEL
          </div>
          <div class="box-inside">
            <form>
              <table>
                <button>
                    </button>
              </table>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-right">
      <div class="height-100">
        <div class="box">
          <div class="box-title">
            RIGHT PANEL
          </div>
          <div class="box-inside">
            <span>STATUS</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This is a bit different but very close to my case.

On my screen I see this:

Also, when I checked the example with display:table and display:table-cell, I see that no one else is using float left or right. However I have to have it since it comes from the common css and other components are using it.

Use clearfix or flexbox if you want to work like nowadays ;) — JFC, Aug 17 '17 at 15:31
floating an element takes it out of the context of the DOM, therefor your element has no parents to whom the height is to be set relevant to. — coderodour, Aug 17 '17 at 15:33
@coderodour So, when the float applied to this boxes than parenting ends. But still, left box and the right box exactly have the same css properties. Why does the left one have a different height? — Erdi İzgi, Aug 17 '17 at 15:37

score 2 · Accepted Answer · answered Aug 17 '17 at 15:55

Since you use float, your boxes end up being outside the context of the DOM and therefor no longer have parents to whom their height should be relevant to since you have set it in percentages.

Because your form element in your left panel has a margin-top and height css property and boxes are outside the context of the dom so the heights are not relevant to a parent, each box grows in height to wrap around its own content. Removing the margin-top and height css property from the form will make your boxes equal height.

.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 {
  background: #f3f789;
}

table {
  width: 100%;
  border-spacing: 0 0;
  white-space: nowrap;
  border-collapse: collapse;
  color: black;
}

<div class="container">
  <div class="panels">
    <div class="panel-left">
      <div class="height-100">
        <div class="box">
          <div class="box-title">
            LEFT PANEL
          </div>
          <div class="box-inside">
            <form>
              <table>
                <button>
                    </button>
              </table>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-right">
      <div class="height-100">
        <div class="box">
          <div class="box-title">
            RIGHT PANEL
          </div>
          <div class="box-inside">
            <span>STATUS</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS: Why do using float: left break the height of the div?

1 Answers1