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

close up photo of microphone
How Brand Voice and Tone Build Stronger Connections With Your Students View this Story
Excited man
A Guiding Light: 5 Must-Sees on Beacon's Brand New Website View this Story
Smart phone displaying lock symbol
Unlocking the Web: The How and Why of Web Accessibility View this Story
image of balancing stones on river
Tired of Open-Source Chaos? Find Balance With a Proprietary CMS View this Story

Let's get to work!

Contact Us