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
