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
<div class="container">
<div class="sidebar">
<h2>Sidebar</h2>
</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>CSS Code
.container { overflow: hidden;}
.content, .sidebar { padding-bottom: 99999px; margin-bottom: -99999px;}Result
Please note that for mobile resolutions you have to set margin and padding values to “0” for better representations.
@media (max-width: 767px){
.content, .sidebar { padding-bottom: 0px; margin-bottom: 0px;}
}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.
- table
- table-row
- 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.
You may also like
How does UI and UX Design Impact our everyday lives?
Today’s modern day users' wants and needs have shifted drastically. In today’s day and age, ther...
AI-Driven UI UX Testing: A Profitable Move for Modern Web Design
AI powered future is shining the brightest for companies and...
UX Design for Startups: A Key Necessity
UX design is all about top-notch user experience. UX design for startups is non-negotiable. Are you ...
