CSS Equal Height Columns Without Javascript

Beacon Blog Article

By Zedric Myers | 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

Beaconville booth with Kent and Emily
Hello from Beaconville: High Ed Conference Wrap-Up View this Story
Confetti and Balloons
Cue the Confetti: Celebrating 2022's Higher Ed Wins So Far View this Story
Beach scene with Beacon logo
Beacon Technologies Opens Second Location in Carolina Beach, NC View this Story
outline of person sitting at computer and cheering
Why You Need Audience Personas For Your Website Content View this Story

Let's get to work!

Contact Us