Create a layout with four columns, ensuring that each set of two columns has equal heights

Question

Create a layout with four columns, ensuring that each set of two columns has equal heights

Trying to create a container with two columns, each containing two columns of their own, all with equal heights using only CSS.

The issue: the inner columns in their parent column do not align with the other inner columns in their respective parent column.

Preferably, I want to use a method involving display: table; and display: table-cell;. Avoiding flexbox due to compatibility issues with IE.

See the JSFiddle.

I can achieve the desired layout by eliminating the two main column divs and creating four separate divs (each as a table-cell), all with equal heights; however, it's not the ideal solution.

Any suggestions or assistance would be greatly appreciated.

html css

Answer 1

Answer №1

After exploring various options, I have come up with a solution that seems to be the most effective, although it requires some modifications to your HTML structure.

To achieve the desired layout, I recommend eliminating the two main columns represented by divs and replacing them with four separate divs styled as table-cells. While this approach can deliver the expected results, it may not be the most optimal one.

In case you were wondering about specifying heights, my solution does not include that but focuses on restructuring the elements for better alignment.

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 lab...</div>
  </div>
</div>

This technique leverages display: table-column; property to ensure consistent height across all rows and cells within the table structure.

To simplify the understanding of the code, I have reverted the div elements back to their original table tags for clarity.

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 co...  
    </td>
  </tr>
</table>

Answer 2

After exploring various options, I have come up with a solution that seems to be the most effective, although it requires some modifications to your HTML structure.

To achieve the desired layout, I recommend eliminating the two main columns represented by divs and replacing them with four separate divs styled as table-cells. While this approach can deliver the expected results, it may not be the most optimal one.

In case you were wondering about specifying heights, my solution does not include that but focuses on restructuring the elements for better alignment.

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 lab...</div>
  </div>
</div>

This technique leverages display: table-column; property to ensure consistent height across all rows and cells within the table structure.

To simplify the understanding of the code, I have reverted the div elements back to their original table tags for clarity.

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 co...  
    </td>
  </tr>
</table>

Answer 3

Answer №2

Here's a different approach that utilizes floats and avoids using table layout techniques. The key is in using

margin-bottom: -99999px; padding-bottom: 99999px;

. This will require some modifications to your HTML structure. Give it a try by running the snippet.

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>

Answer 4

Here's a different approach that utilizes floats and avoids using table layout techniques. The key is in using

margin-bottom: -99999px; padding-bottom: 99999px;

. This will require some modifications to your HTML structure. Give it a try by running the snippet.

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>

Create a layout with four columns, ensuring that each set of two columns has equal heights

Answer №1

Answer №2

Similar questions

Add a foundation to this CSS pyramid

Choosing an element with JavaScript

Move a <div> using a handle (without using JQuery)

Encountering an error in a Javascript function: Property 'style' is unreadable because it is undefined

VueJs does not display the source code of components for users

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

Generating a list of items to buy using a JSON document

Instructions on adding a solid border color to a circular div using CSS

What could be causing the undefined status of my checkUser() function?

Guide on connecting MySQL 'id' to an HTML element

Creating an input field within a basic jQuery dialog box is not possible

Unable to show PHP results in HTML

Tips for creating a more flexible HTML container and resizing the navbar for mobile devices

Miscalculation in PHP MySQL: Incorrect output when adding field 1 and multiplying field 2 by

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Select options with disabled sorting feature

Interval function not initiating properly post bullet navigation activation

Adding a MySQL-PHP combination programmatically

photos arranged in rows rather than a single row

Alter the color of the text within the `<li>` element when it is clicked on