Do you need a solution to make both content area and sidebar in equal height using pure CSS? Let’s learn, how to make the equal height columns using CSS flexbox.
The flexbox is a great CSS3 property that allows us to easily handle a difficult task. Making the same size columns in terms of height is a great user experience and has been a need for web designers forever.
If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their background, it becomes vital to the visual integrity of the design.
Ok, I am going to create a responsive two-column structure with columns of similar width, same height, and the fixed-pixel margin between them.
HTML Structure for Equal Height Columns
First of all, we will have one primary container along with two child elements. We added a class flexbox-container for the main wrapper and the first child use the which is basically our content area.
The second one is our sidebar and defined as flexbox-sidebar.
<div class="flexbox-container"> <div class="flexbox-content"><h3>Column 1</h3></div> <div class="flexbox-sidebar"><h3>Column 2</h3></div> </div>
CSS Styles
The CSS is pretty much easy. Simply set the display: flex; on the main container div and then give 50% width to each child divs.
To make compatible with WebKit browser, we will use -ms-flex and -webkit-flex
You can also add some padding for both child divs, so they look nice. To look it better, We are going to add some more styles like border and background color, etc.
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
.flexbox-container > .flexbox-content,
.flexbox-container > .flexbox-sidebar {
width: 50%;
padding: 10px;
}
.flexbox-container > .flexbox-content {
margin-right: 20px;
}
That’s all, you need to make both columns at the same height. it’s a really simple and easy way to do. Let me know if you are able to make equal height columns using CSS flexbox property.