Contact Us

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 1: Using margin and padding

With the use of margin and padding we can make equal height of columns. Have a look on below code of HTML. Here we have to set some values to padding and also equal value of margin but in negative numbers.

HTML code

CSS Code

Result

screenshot-1

Please note that for mobile resolutions you have to set margin and padding values to “0” for better representations.

I hope it was easy to understand. Now, let us try another way for the same.

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

CSS Code

Result

screenshot-2

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

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

CSS Code

Example 2:

HTML Code

CSS Code

Result

screenshot-3

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.

Click To Download Full Source Code

Nipa Khunt

Nipa Khunt | Jr. Web Designer

I am Jr. Web Designer at Yudiz Solutions Pvt. Ltd. - a leading web, mobile apps and Game development company. Designing has always been my passion which makes it obvious that I chose my career in web designing. I like to share my experiences and challenges that I face through writing blogs.

Leave a Reply

Top
Yudiz Solutions Pvt. Ltd.
Career
Are you looking for a company where you are appreciated for your work?
Get a Free Quote
Tell Us Your Project Requirements

Career
Are you looking for a company where you are appreciated for your work?
Get a Free Quote
Tell Us Your Project Requirements