Make two columns each with two columns of equal heights
I'm trying to have a 2-column container, each with two columns on the inside, all the same height, using only CSS.
Problem: Two columns inside the main column are not the same as two other columns inside the main column.
Ideally I would like to use a method using display: table;
and display: table-cell;
. I prefer not to use flexbox due to IE compatibility.
Look jsFiddle .
I can achieve the look I want by removing the two divs serving as the two main columns and making four separate divs (each table-cell), all of the same height; however, it is not perfect.
I appreciate any suggestions or help.
source to share
This solution is the best way to do it that I can think of, however you will need to change your HTML.
I can achieve the look I want by removing the two divs serving as the two main columns and making four separate divs (each table-cell), all of the same height; however, it is not perfect.
I was not sure if you want to determine the heights, but this is my solution.
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 what they need to fill the table height.
Just to get a little understanding of what's going on here, I changed everything from the div to the appropriate 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>
source to share
Here's an alternative method that uses floats, etc., and no table layout stuff. Magic happens with margin-bottom: -99999px; padding-bottom: 99999px;
. However, it changes your HTML. Run the snippet to see how it works.
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>
source to share