In this post, we will learn how to create equal height columns side by side with HTML and CSS. So how we can do this, we will learn in this post.


How To Create Equal Height Columns Side By Side With HTML and CSS ?


Create Equal Height Columns Side By Side   

There are two ways to create equal height columns side by side:

  1. Using Flexbox
  2. Using Table

Now we will discuss about the both methods in detail:


Using Flexbox

To create equal height columns using flexbox, we use  display: flex  CSS property. So how we can do this we will see this in the following example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Create Equal Height Columns Side By Side With HTML and CSS ?</title>
<style>
.container {
display: flex;
width: 100%;
}
.column {
flex: 1;
padding: 10px;
color: #fff;
}
</style>
</head>
<body>


<div class="container">
<div class="column" style="background:#222">
<p>Column 1</p>
<p>Column 1</p>
<p>Column 1</p>
<p>Column 1</p>
<p>Column 1</p>
</div>


<div class="column" style="background:#666">
<p>Column 2</p>
<p>Column 2</p>
<p>Column 2</p>
<p>Column 2</p>
<p>Column 2</p>
</div>


<div class="column" style="background:#888">
<p>Column 3</p>
<p>Column 3</p>
<p>Column 3</p>
<p>Column 3</p>
<p>Column 3</p>
</div>
</div>


</body>
</html> code-box

So with Flexbox we can easily create equal height columns. But felxbox does not work in internet explorer 10 and earlier versions. For this reason we will create equal height columns using second method.


Using Table

To create equal height columns without using flexbox, we use  display: table  CSS property. This property makes the container element behave like a table. Then we use  display: table-cell  CSS property. This property make elements inside the container behave like table cells. 

So how these two properties work, let's look at the following example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Create Equal Height Columns Side By Side With HTML and CSS ?</title>
<style>
.container {
display: table;
width: 100%;
}
.column {
display: table-cell;
padding: 10px;
color: #fff;
}
</style>
</head>
<body>


<div class="container">
<div class="column" style="background:#222">
<p>Column 1</p>
<p>Column 1</p>
<p>Column 1</p>
<p>Column 1</p>
<p>Column 1</p>
</div>


<div class="column" style="background:#666">
<p>Column 2</p>
<p>Column 2</p>
<p>Column 2</p>
<p>Column 2</p>
<p>Column 2</p>
</div>


<div class="column" style="background:#888">
<p>Column 3</p>
<p>Column 3</p>
<p>Column 3</p>
<p>Column 3</p>
<p>Column 3</p>
</div>
</div>


</body>
</html> code-box


Summary

In this post we learned how to create equal height columns side by side with HTML and CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts. 

Post a Comment

Previous Post Next Post