CSS Equal Height Columns Without Javascript

Published June 20, 2017 | Categories: Web Development
Here are two CSS options for equal height columns, without using javascript.
1. Using CSS Table Properties
HTML
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
CSS
.col-container {
display: table; /* Make the container element behave like a table */
width: 100%; /* Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table cells */
}
Source: W3schools
2. Using Margin and Padding Method
HTML
.main .container {
padding-right: 330px;
overflow: hidden;
}
.content {
float: left;
width: 100%;
background-color: #fff;
}
.sidebar {
float: right;
margin-right: -330px;
width: 300px;
background-color: #fff;
}
.content,
.sidebar {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
section,
aside {
padding: 30px
}
Source: Call Me Nick
Recent Posts

Hello from Beaconville: High Ed Conference Wrap-Up
View this Story

Cue the Confetti: Celebrating 2022's Higher Ed Wins So Far
View this Story

Beacon Technologies Opens Second Location in Carolina Beach, NC
View this Story

Why You Need Audience Personas For Your Website Content
View this Story