CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 241

Make two columns, each with two columns inside, equal heights

I am attempting to have a container with two columns, each with two columns of their own inside, all with equal heights, using only CSS.

The problem: the two columns inside their main column don't match up with the other two columns inside their main column.

Ideally, I would like to use a method using display: table; and display: table-cell;. I prefer not to use flex box, due to IE compatibility.

View the JSFiddle.

I can achieve the look I want by removing the two divs serving as the two main columns and make four separate divs(each a table-cell), all with equal heights; however, it's not ideal.

I appreciate any suggestions or help.

Upvotes: 3

Views: 79

Answers (2)

Ted
Ted

Reputation: 14937

Here's an alternate method which uses floats etc and no table layout stuff. The magic happens with margin-bottom: -99999px; padding-bottom: 99999px;. It does alter your HTML though. Run the snippet to see it work.

html {
  font: 16px Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
.container {
  border: 1px solid #586478;
  padding: 5px;
  overflow: hidden;
}
.column {
  float: left;
  background: #586478;
  color: #fff;
  height: 100%;
  padding: 20px;
  text-align: left;
  width: 25%;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
.column:nth-child(even) {
  background: #eee;
  color: #586478;
}
<div class="container">
  <div class="column">Shorter description.</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamc laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="column">Longer description.</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div style="clear:both;"></div>
</div>

Upvotes: 0

jaunt
jaunt

Reputation: 5089

This solution is the best way of doing it that I can think of, however you will need to change your HTML a tad.

I can achieve the look I want by removing the two divs serving as the two main columns and make four separate divs(each a table-cell), all with equal heights; however, it's not ideal.

I wasn't sure if you meant define the heights, but this is my solution anyway. 

html {
    font: 16px Arial, sans-serif;
}
.container {
  border: 1px solid #586478;
  display: table;
  padding: 5px;
  table-layout: fixed;
}
.content {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 20px;
  color: #fff;
  width:25%;
}
.cell:nth-child(even) {color: #586478;}
.column {
    background: #586478;
    display: table-column;
    height: 100%;
}
.column:nth-child(even) {
    background: #eee;
}
<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div> 
  <div class="content">
    <div class="cell">Shorter description.</div>
    <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="cell">Longer description.</div>
    <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
  </div>
</div>

This method uses display: table-column;, which basically tells the rest of the rows and cells that they need to fill height of the table.

Just to make it a little easier to understand what's going on here, I've changed everything back from div's to their corresponding table tags.

td{
  vertical-align: top;
  width:25%;
  color: #fff;
  padding: 20px;
}
td:nth-child(even) {color: #586478}
col {background: #586478;}
col:nth-child(even) {background: #eee;}
<table>
  <colgroup>
    <col><col><col><col>
  </colgroup>
  <tr>
    <td>Shorter description.</td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.      
    </td>
    <td>Longer description.</td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum    
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions