Alternate solution for outdated browsers that stretches to the maximum height available

Question

Alternate solution for outdated browsers that stretches to the maximum height available

Is there a way to ensure equal height for all children using flexbox, but also have a fallback option for browsers like IE10 and similar?

I tried using display: table and display: table-cell, but it doesn't seem to work well with fixed heights. Additionally, table-layout: fixed only sizes based on the first cell's height if it is the largest.

html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
}

.gel-layout--equal {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.gel-1\/3 {
  width: 33.33333333%!important;
}

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
}

.gel-layout--equal>.gel-layout__item {
  display: table-cell;
}

.gel-c-grid-demo-item {
  width: 100%;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
}

.gel-c-grid-demo-item--auto {
  height: auto;
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.gel-c-grid-demo-item--first {
  height: 72px;
}

.gel-c-grid-demo-item--large {
  height: 144px;
}

<div class="wrap">
  <div>
    <h2>Equal Height</h2>
    <div class="gel-layout gel-layout--equal">
      <div class="gel-layout__item gel-1/3 left">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto gel-c-grid-demo-item--fill gel-c-grid-demo-item gel-c-grid-demo-item--first">one</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--fill">two</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--large gel-c-grid-demo-item--fill">three</div>
      </div>
    </div>
  </div>
</div>

html css html-table

Answer 1

Answer №1

A solution was found for the height issue by commenting the height and adding a hack with height:1px. Additionally, display:inline-table; was included for inner children to address the problem in Firefox mentioned by @Stickers

html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
}

.gel-layout--equal {
  display: table;
  table-layout: fixed;
  width: 100%;
  height:1px; /* a hack to set the height of the children equal */
}

.gel-1\/3 {
  width: 33.33333333%!important;
}

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
}

.gel-layout--equal>.gel-layout__item {
  display: table-cell;
}

.gel-c-grid-demo-item {
  width: 100%;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  height: 100%; /* added this height to make the height equal to the greatest element */
  display: inline-table; /* to fix firefox issue */
}

.gel-c-grid-demo-item--auto {
  /*height: auto; commented this height */
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.gel-c-grid-demo-item--first {
  /*height: 72px; commented this height*/
}

.gel-c-grid-demo-item--large {
  height: 144px;
}

<html>

<body>
  <div class="wrap">
    <div>
      <h2>Equal Height</h2>
      <div class="gel-layout gel-layout--equal">
        <div class="gel-layout__item gel-1/3 left">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto gel-c-grid-demo-item--fill gel-c-grid-demo-item gel-c-grid-demo-item--first">one</div>
        </div>
        <div class="gel-layout__item gel-1/3">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--fill">two</div>
        </div>
        <div class="gel-layout__item gel-1/3">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--large gel-c-grid-demo-item--fill">three</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Here is another version with large content

html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
}

.gel-layout--equal {
  display: table;
  table-layout: fixed;
  width: 100%;
  height:1px; /* a hack to set the height of the children equal */
}

.gel-1\/3 {
  width: 33.33333333%!important;
}

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
}

.gel-layout--equal>.gel-layout__item {
  display: table-cell;
}

.gel-c-grid-demo-item {
  width: 100%;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  height: 100%; /* added this height to make the height equal to the greatest element */
  display: inline-table; /* to fix firefox issue */
}

.gel-c-grid-demo-item--auto {
  /*height: auto; commented this height */
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.gel-c-grid-demo-item--first {
  /*height: 72px; commented this height*/
}

.gel-c-grid-demo-item--large {
  /*height: 144px;*/
}

<div class="wrap">
  <div>
    <h2>Equal Height</h2>
    <div class="gel-layout gel-layout--equal">
      <div class="gel-layout__item gel-1/3 left">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto gel-c-grid-demo-item--fill gel-c-grid-demo-item gel-c-grid-demo-item--first">one</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--fill">two</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--large gel-c-grid-demo-item--fill">three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

A solution was found for the height issue by commenting the height and adding a hack with height:1px. Additionally, display:inline-table; was included for inner children to address the problem in Firefox mentioned by @Stickers

html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
}

.gel-layout--equal {
  display: table;
  table-layout: fixed;
  width: 100%;
  height:1px; /* a hack to set the height of the children equal */
}

.gel-1\/3 {
  width: 33.33333333%!important;
}

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
}

.gel-layout--equal>.gel-layout__item {
  display: table-cell;
}

.gel-c-grid-demo-item {
  width: 100%;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  height: 100%; /* added this height to make the height equal to the greatest element */
  display: inline-table; /* to fix firefox issue */
}

.gel-c-grid-demo-item--auto {
  /*height: auto; commented this height */
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.gel-c-grid-demo-item--first {
  /*height: 72px; commented this height*/
}

.gel-c-grid-demo-item--large {
  height: 144px;
}

<html>

<body>
  <div class="wrap">
    <div>
      <h2>Equal Height</h2>
      <div class="gel-layout gel-layout--equal">
        <div class="gel-layout__item gel-1/3 left">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto gel-c-grid-demo-item--fill gel-c-grid-demo-item gel-c-grid-demo-item--first">one</div>
        </div>
        <div class="gel-layout__item gel-1/3">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--fill">two</div>
        </div>
        <div class="gel-layout__item gel-1/3">
          <div class="gel-c-grid-demo-item gel-c-grid-demo-item--large gel-c-grid-demo-item--fill">three</div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Here is another version with large content

html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
}

.gel-layout--equal {
  display: table;
  table-layout: fixed;
  width: 100%;
  height:1px; /* a hack to set the height of the children equal */
}

.gel-1\/3 {
  width: 33.33333333%!important;
}

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
}

.gel-layout--equal>.gel-layout__item {
  display: table-cell;
}

.gel-c-grid-demo-item {
  width: 100%;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  height: 100%; /* added this height to make the height equal to the greatest element */
  display: inline-table; /* to fix firefox issue */
}

.gel-c-grid-demo-item--auto {
  /*height: auto; commented this height */
}

.gel-c-grid-demo-item--fill {
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.gel-c-grid-demo-item--first {
  /*height: 72px; commented this height*/
}

.gel-c-grid-demo-item--large {
  /*height: 144px;*/
}

<div class="wrap">
  <div>
    <h2>Equal Height</h2>
    <div class="gel-layout gel-layout--equal">
      <div class="gel-layout__item gel-1/3 left">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto gel-c-grid-demo-item--fill gel-c-grid-demo-item gel-c-grid-demo-item--first">one</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--fill">two</div>
      </div>
      <div class="gel-layout__item gel-1/3">
        <div class="gel-c-grid-demo-item gel-c-grid-demo-item--large gel-c-grid-demo-item--fill">three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>three
          <br>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

Reorganized the classes by removing the .item div and consolidating all classes. The parent element must have display:table or display:table-row for table behavior to work properly, such as equal heights.
Added border-spacing to the display:table element. Margins are ignored by table components, so setting border-spacing was necessary to separate and define each cell as its own entity.
Eliminated the .gel-1/3 class, which, although valid, was redundant as the cells were already set to be 33.33% under display:table-cell with display:table and table-layout.
During the class consolidation process, special attention was paid to removing double-hyphen classes -- as they are typically reserved for CSS variables and are not always considered safe.

Demo

html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.table {
  display: table;
  table-layout: fixed;
  border-spacing: 5px;
  width: 100%;
}

.cell {
  text-align: left;
  vertical-align: top;
  display: table-cell;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  /*outline:2px solid red;*/
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.first {
  height: 72px;
}

.large {
  height: 144px;
}

<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>

</style>
</head>
  <body>
    <div class="wrap">
  
        <h2>Equal Height</h2>
        <div class="table">

            <div class="cell first">one</div>

            <div class="cell">two</div>

            <div class="cell large">three</div>
 
        </div>
      </div>
    
  </body>

</html>

Answer 4

Reorganized the classes by removing the .item div and consolidating all classes. The parent element must have display:table or display:table-row for table behavior to work properly, such as equal heights.
Added border-spacing to the display:table element. Margins are ignored by table components, so setting border-spacing was necessary to separate and define each cell as its own entity.
Eliminated the .gel-1/3 class, which, although valid, was redundant as the cells were already set to be 33.33% under display:table-cell with display:table and table-layout.
During the class consolidation process, special attention was paid to removing double-hyphen classes -- as they are typically reserved for CSS variables and are not always considered safe.

Demo

html {
  box-sizing: border-box;
}

*,
:after,
:before {
  box-sizing: inherit;
}

.wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.table {
  display: table;
  table-layout: fixed;
  border-spacing: 5px;
  width: 100%;
}

.cell {
  text-align: left;
  vertical-align: top;
  display: table-cell;
  padding: 8px;
  background-color: #d4e7eb;
  color: #121212;
  /*outline:2px solid red;*/
  background: repeating-linear-gradient(180deg, #d4e7eb, #d4e7eb 8px, #aec4cc 0, #aec4cc 16px);
}

.first {
  height: 72px;
}

.large {
  height: 144px;
}

<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>

</style>
</head>
  <body>
    <div class="wrap">
  
        <h2>Equal Height</h2>
        <div class="table">

            <div class="cell first">one</div>

            <div class="cell">two</div>

            <div class="cell large">three</div>
 
        </div>
      </div>
    
  </body>

</html>

Alternate solution for outdated browsers that stretches to the maximum height available

Answer №1

Answer №2

Demo

Similar questions

Blur effect on backdrop-filter causing shadowy inset borders (specific to Chrome and Windows)

How can I link two separate webpages upon submitting a form with a single click?

Creating a clickable link that dynamically updates based on the span and id values, and opens in a new browser tab

javascript popup appears twice in IE when using PHP

"Hover over the image to see it enlarge and reveal text displayed on top using CSS3

Pass the variable to another page (Deliver a message)

Struggling with implementing a materialize modal?

Activate event in jQuery when clicking on a blank area, away from any div element

What are the steps to incorporating the League Gothic font into my website design?

What are some ways to ensure a JQM-created button is clickable in Firefox?

Create a basic grid layout using Bootstrap

Issue with data binding in file upload field

Is the 404 error a result of the ajax code?

"Shopping just got easier with our new drag and drop feature! Simply drag items

Menu Design Inspired by Amazon Using jQuery

Position the spinner in the center of the user's screen

Issue with Vue's v-autocomplete component not clearing the user's typed text when an item is selected from

Gallery tiled with images enclosed in <a> tags

React Sticky sidebar implementation throughout the various components

Executing HTTP requests in ngrx-effects