CODEWITHSUNDEEP
css
apdm
apdm

Reputation: 1330

Why is my CSS table displaying height for an element that has max-height of 0?

I have an outer div which I am displaying as a table, and and 2 inner divs.

The first inner div is floated to the left. The second inner div has a max height of 0.

.d-table {
       display: table;
      border: solid 1px black;
    }

    .float-left{
	    float: left;
    }

    .hidden{
      max-height: 0px;
      overflow-y: hidden;
	  clear: both;
    }
<div class="d-table">
      <div class="float-left">
         hey
      </div>
      
      <div class="hidden">
        cool
      </div>
    </div>

Expected result is:

enter image description here

Actual result is:

enter image description here

The table is taking into account the div with a height of 0 for some reason.

JSFiddle

Upvotes: 2

Views: 44

Answers (3)

ZKA
ZKA

Reputation: 507

The .hidden element is theoretically being displayed correctly with a height of 0. But then it has a clear:both, while the other div hass float:left, and their parents is displayed as table. This is the magic combo, confusing the height of the parent div.

The problem is: you first kind-of take the first div out of document flow. It is placed somewhere new, but still not really there (yes, floats are spooky as f***). THEN you clear:both the second div, forcing it on a new line. The parent div (having forgotten all about the first div and the 18 vertical pixels it's taking up), can't have a height of 0 (because it's display-table), so it's given a minimum height of something-something.

There's really no other solution known to me than not using that combination. I would recommend actually hidding the hidden div (display:none).

Upvotes: 1

Shannon Scott Schupbach
Shannon Scott Schupbach

Reputation: 1278

This is because the .hidden div is still part of the DOM and factors into the position calculations for the .d-table element.

Instead of max-height: 0;, use display: none. This removes the element from the flow of the DOM.

Upvotes: 2

Oriol
Oriol

Reputation: 288530

Seems causes due to non-zero line-height of the div and the vertical-align: baseline of the anonymous cell.

I would use display: table-cell in order to be able to style the cell with vertical-align: top

.d-table {
  display: table-cell;
  vertical-align: top;
  border: solid 1px black;
}
.float-left {
  float: left;
}
.hidden {
  max-height: 0px;
  overflow-y: hidden;
  clear: both;
}
<div class="d-table">
  <div class="float-left">hey</div>
  <div class="hidden">cool</div>
</div>

If you need display: table, then you can't style the anonymous table cell, but you can reduce the space with line-height: 0.

.d-table {
  display: table;
  vertical-align: top;
  border: solid 1px black;
}
.float-left {
  float: left;
}
.hidden {
  line-height: 0;
  max-height: 0px;
  overflow-y: hidden;
  clear: both;
}
<div class="d-table">
  <div class="float-left">hey</div>
  <div class="hidden">cool</div>
</div>

Upvotes: 3

Related Questions