3 Easiest ways to make equal height blocks using CSS

Click To Download Full Source Code

Overview

As per the current website design trends most of the designs has equal height of blocks. As a web designer it is very difficult to do so using CSS only. Following are some methods to do equal height blocks with the help of CSS in easiest way.

How to make sidebar and content blocks equal height in different ways?

Here we are going to learn how to make 2 blocks of equal height in different way.

Many designers has these type of  problems so today we are going to make it easy and make any website in short period of time.

We are  going to start with simple example using only CSS and there is no use of any Javascript. Every designer has a goal to create a design with better look and feel.

Method 2: Using display property

Using display property we can create the same thing. It is an old way to make the solution but it is a very easy way for quick solution and fulfill our requirement. Here are the three main CSS properties to use.

1. table
2. table-row
3. table-cell

HTML code

<div class="main">
   <div class="container">
       <div class="content-table">
          <div class="content-row">
              <div class="column content1">
                  <h1>Section 1</h1>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
              </div>
              <div class="column sidebar">
                  <h2>Sidebar</h2>
              </div>
           </div>
        </div>
    </div>
</div>

CSS Code

.content-table         { display: table; border-collapse: separate; border-spacing: 30px 0;}
.content-row           { display: table-row;}
.column                { display: table-cell;}
.sidebar               { width: 300px;}

Result

Please note that for mobile resolutions you will have to set display property’s value to “block” for better representations.

@media (max-width: 767px){
    .content-table,  
    .content-row, .column        { display: block;}
}

If this helps you to solve your problem then apply in your project.

Method 3: Using CSS Flex Box

Now a days CSS3 introduces Flexbox which helps us in very amazing and creative way. It reduces the use of floats so not to worry about clearing floats in your layouts. Let’s have look how Flexbox helps us to make equal height blocks.

Example 1:

HTML code

<div class="box">
	<div class="column"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
	<div class="column"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
	<div class="column"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>

CSS Code

.box             { display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden;}
.box .column     { flex: 1; background: #aaa; margin-right: 10px; padding: 15px;}

Example 2:

HTML Code

<ul class="flexlist">
	<li class="flexlist-item">Lorem Ipsum is simply dummy text</li>
        <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text</li> 
</ul>

CSS Code

.flexlist         { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: hidden;}
.flexlist-item    { width: calc(100% / 2 - 5px); float: left; display: -webkit-flex; display: -ms-flexbox; display: flex;}

Result

Here are 2 different ways to use flexbox for equal height blocks.

In example 1, display: flex initiates flexbox for container block. Then you have to set flex: 1 which defines flex grow i.e it covers the whole area of flex container.

In example 2, display: flex initiates flexbox for container block. Then flex-wrap: wrap tells to wrap the child within the blocks. Last use of display: flex is for child items to fit within the block and they have equal height for all.