
If you want to achieve an equal height of columns (side by side), follow the steps below:
Demo:
Column 1
Some other text..
Column 2
Some other text..
Some other text..
Some other text..
Some other text..
Column 3
Some other text..
Some other text..
Step1.
Add HTML
Create the column container and add three columns:
<div class="column-container">
<div class="column" style="background-color:#e9c46a">
<h2>Column 1</h2>
<p>Some other text..</p>
</div>
<div class="column" style="background-color:#2a9d8f">
<h2>Column 2</h2>
<p>Some other text..</p>
<p>Some other text..</p>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
<div class="column" style="background-color:#e9c46a">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
Step2.
Add CSS
Set the display property values to “table” for the container, and “table-cell” for elements inside the container:
.column-container {
display: table;
width: 100%;
}
.column {
display: table-cell;
padding: 16px;
}
Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):
@media only screen and (max-width: 600px) {
.column {
display: block;
width: 100%;
}
}
Enjoy coding!
Read also:
CSS Border Corner Shape: Scoop, Notch, Square-Cut
How to create a responsive three-column layout?