CSS Equal Height Columns Without Javascript
Here are two CSS options for equal height columns, without using javascript.
1. Using CSS Table Properties
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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
1 2 3 4 5 6 7 8 |
.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="main"> <div class="container clearfix"> <div class="content"> <section> <h1>This is the Main Content</h1> <hr> <h2>A sub heading</h2> <p>Lorem ipsum dolor sit amet, consectetur...</p> </section> </div> <div class="sidebar"> <aside> <h2>This is a sidebar</h2> Sign up to the newsletter! </aside> </div> </div><!-- /.containter --> </div><!-- /.main --> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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