If you are displaying a number of columns on your web page then would of probably reached the problem where you need these columns to be the same height as each other. The problem you have with these is when you have different content in the columns some will be larger than others, which will break the design of the website.
When you start adding content to these boxes they can become misaligned, as you will never have the same amount of content in each of the columns and you will have one column larger than the next one.
How To Make Both Columns Equal Size
There are a few techniques that you can use to fix this problem, you can either use CSS only solutions or you can do this with Javascript. The following tutorial will create equal sized columns using 3 CSS methods and one method using jQuery. View the demo to see how the different techniques can create equal size columns.
Relative Positioned Wrapper
The relative positioned wrapper method will have the columns inside a wrapper DIV, we can then place a position: relative on the wrapper DIV. We will then add a position: absolute to the columns, setting a top: 0 will place the columns at the top of the wrapper, placing bottom: 0 on the column will make both of them full height of the wrapper div.
<h2>Relative Position Wrapper Solution</h2>
<div class="relative-wrapper">
<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tempor nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra libero ligula, ac faucibus sapien vehicula quis. Donec pretium nunc in aliquam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet vulputate lectus, nec pharetra libero vulputate at. Pellentesque at elementum massa. Nunc at dui id sapien pulvinar egestas.</div>
<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus augue ut egestas lacinia. Cras vitae odio sed est ultricies varius vel bibendum lacus. Nulla eget euismod orci, dignissim pellentesque ligula. Aliquam mattis vitae ipsum sed pharetra. Suspendisse consectetur nisl sit amet nisl fermentum bibendum. Donec tempus tincidunt nisi, vitae varius velit vehicula ac. Quisque viverra auctor dui, a volutpat ante gravida quis. Integer erat massa, lacinia ut nisi eu, scelerisque mollis magna.
Morbi feugiat pretium urna, et volutpat dui lacinia in. Curabitur fringilla lacus risus, vel dapibus odio tincidunt non. Sed sagittis odio sit amet fringilla egestas. Aenean a turpis ac tellus hendrerit placerat. Phasellus hendrerit tellus interdum bibendum dignissim. Nulla facilisi. Vivamus ultrices vehicula nulla a pulvinar. Praesent suscipit eu felis gravida luctus. Etiam enim mi, tempus quis convallis quis, vestibulum sit amet erat. Nam volutpat varius velit, a elementum libero tempor id. Pellentesque magna ligula, accumsan sit amet varius interdum, mattis suscipit lorem. Mauris ullamcorper sem sit amet volutpat pellentesque. Nunc urna mi, porta sed elit ac, sollicitudin venenatis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
}
/*****************************************************
* Relative Wrapper
*****************************************************/
.relative-wrapper
{
position: relative;
width: 100%;
height: auto;
min-height: 450px;
}
.relative-wrapper .column
{
position: absolute;
top: 0;
bottom: 0;
}
.relative-wrapper .column:nth-child(2)
{
left: 29%;
}
To create the gap between the different columns we can't use margins because we are using position: absolute, so we have to use the left property on the second column.
CSS Table Solution
The CSS table solution will define the HTML DIVs as a table which makes the browser display these elements exactly as it would behave with a HTML table. The HTML for this can be exactly the same as the relative position wrapper, it has a wrapper DIV with the two columns inside of it.
<h2>CSS Table Solution</h2>
<div class="css-table-wrapper">
<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tempor nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra libero ligula, ac faucibus sapien vehicula quis. Donec pretium nunc in aliquam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet vulputate lectus, nec pharetra libero vulputate at. Pellentesque at elementum massa. Nunc at dui id sapien pulvinar egestas.</div>
<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus augue ut egestas lacinia. Cras vitae odio sed est ultricies varius vel bibendum lacus. Nulla eget euismod orci, dignissim pellentesque ligula. Aliquam mattis vitae ipsum sed pharetra. Suspendisse consectetur nisl sit amet nisl fermentum bibendum. Donec tempus tincidunt nisi, vitae varius velit vehicula ac. Quisque viverra auctor dui, a volutpat ante gravida quis. Integer erat massa, lacinia ut nisi eu, scelerisque mollis magna.
Morbi feugiat pretium urna, et volutpat dui lacinia in. Curabitur fringilla lacus risus, vel dapibus odio tincidunt non. Sed sagittis odio sit amet fringilla egestas. Aenean a turpis ac tellus hendrerit placerat. Phasellus hendrerit tellus interdum bibendum dignissim. Nulla facilisi. Vivamus ultrices vehicula nulla a pulvinar. Praesent suscipit eu felis gravida luctus. Etiam enim mi, tempus quis convallis quis, vestibulum sit amet erat. Nam volutpat varius velit, a elementum libero tempor id. Pellentesque magna ligula, accumsan sit amet varius interdum, mattis suscipit lorem. Mauris ullamcorper sem sit amet volutpat pellentesque. Nunc urna mi, porta sed elit ac, sollicitudin venenatis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
To create this as a CSS table we need to define the wrapper DIV as a table, this is done by using the display property with the value of table. Next we need to define the columns as table cells inside the table, this is done again with the display property, now using the value of table-cell. Then all we have to do is say that the columns are 100% the size of the table.
.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
}
/*****************************************************
* CSS Table Wrapper
*****************************************************/
.css-table-wrapper
{
display: table;
border-spacing:40px 0;
}
.css-table-wrapper .column
{
display: table-cell;
height: 100%;
}
HTML Table Solution
The HTML solution is the old fashioned way of how we had to fix the layout of the website before using CSS, all we have to do for this is to make sure that both the columns are 100% height of the table.
<h2>HTML Table Solution</h2>
<div class="table-wrapper">
<table>
<tr>
<td class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tempor nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra libero ligula, ac faucibus sapien vehicula quis. Donec pretium nunc in aliquam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet vulputate lectus, nec pharetra libero vulputate at. Pellentesque at elementum massa. Nunc at dui id sapien pulvinar egestas.</td>
<td class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus augue ut egestas lacinia. Cras vitae odio sed est ultricies varius vel bibendum lacus. Nulla eget euismod orci, dignissim pellentesque ligula. Aliquam mattis vitae ipsum sed pharetra. Suspendisse consectetur nisl sit amet nisl fermentum bibendum. Donec tempus tincidunt nisi, vitae varius velit vehicula ac. Quisque viverra auctor dui, a volutpat ante gravida quis. Integer erat massa, lacinia ut nisi eu, scelerisque mollis magna.
Morbi feugiat pretium urna, et volutpat dui lacinia in. Curabitur fringilla lacus risus, vel dapibus odio tincidunt non. Sed sagittis odio sit amet fringilla egestas. Aenean a turpis ac tellus hendrerit placerat. Phasellus hendrerit tellus interdum bibendum dignissim. Nulla facilisi. Vivamus ultrices vehicula nulla a pulvinar. Praesent suscipit eu felis gravida luctus. Etiam enim mi, tempus quis convallis quis, vestibulum sit amet erat. Nam volutpat varius velit, a elementum libero tempor id. Pellentesque magna ligula, accumsan sit amet varius interdum, mattis suscipit lorem. Mauris ullamcorper sem sit amet volutpat pellentesque. Nunc urna mi, porta sed elit ac, sollicitudin venenatis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</td>
</tr>
</table>
</div>
.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
}
/*****************************************************
* HTML Table Wrapper
*****************************************************/
.table-wrapper table
{
border-spacing:40px 0;
}
.table-wrapper table td
{
vertical-align: top;
}
.table-wrapper .column
{
height: 100%;
}
jQuery Solution
The jQuery solution may not seem like the cleanest or nicest solution but it does have the advantage of not having to change the HTML and CSS that you have already created. The HTML for this means that we can just have the two columns populated with the content.
<h2>jQuery Solution</h2>
<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in tempor nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra libero ligula, ac faucibus sapien vehicula quis. Donec pretium nunc in aliquam dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur imperdiet vulputate lectus, nec pharetra libero vulputate at. Pellentesque at elementum massa. Nunc at dui id sapien pulvinar egestas.
</div>
<div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus augue ut egestas lacinia. Cras vitae odio sed est ultricies varius vel bibendum lacus. Nulla eget euismod orci, dignissim pellentesque ligula. Aliquam mattis vitae ipsum sed pharetra. Suspendisse consectetur nisl sit amet nisl fermentum bibendum. Donec tempus tincidunt nisi, vitae varius velit vehicula ac. Quisque viverra auctor dui, a volutpat ante gravida quis. Integer erat massa, lacinia ut nisi eu, scelerisque mollis magna.
Morbi feugiat pretium urna, et volutpat dui lacinia in. Curabitur fringilla lacus risus, vel dapibus odio tincidunt non. Sed sagittis odio sit amet fringilla egestas. Aenean a turpis ac tellus hendrerit placerat. Phasellus hendrerit tellus interdum bibendum dignissim. Nulla facilisi. Vivamus ultrices vehicula nulla a pulvinar. Praesent suscipit eu felis gravida luctus. Etiam enim mi, tempus quis convallis quis, vestibulum sit amet erat. Nam volutpat varius velit, a elementum libero tempor id. Pellentesque magna ligula, accumsan sit amet varius interdum, mattis suscipit lorem. Mauris ullamcorper sem sit amet volutpat pellentesque. Nunc urna mi, porta sed elit ac, sollicitudin venenatis tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
The CSS for this will be just styling the DIV making them a set width with margins making them styled like columns.
.column
{
font-size: 12px;
color: #FFF;
padding: 20px;
width:400px;
background: red;
margin: 20px;
float:left;
}
Next we need to create jQuery function that will resize the columns to be the same height. The following function will search through all the columns and get the height of the tallest column. We can then save this height in a variable and then resize all the columns to be this height.
function resize_elements( selector )
{
if(selector != '')
{
var maxHeight = 0;
$(selector).each(function(){
if(maxHeight < $(this).height())
{
maxHeight = $(this).height();
}
});
if(maxHeight > 0)
{
$(selector).height(maxHeight);
}
}
}
Flexbox Solution
Equal length columns is something that has always been tricky when working with float layouts. If you have a main content column and a sidebar column you can get to the situation where your main content column becomes larger than your sidebar column which can cause design problems if you have a background colour on the sidebar. Now view below the flexbox way of creating equal column lengths.
See the Pen PwbYRR by Paul (@paulund) on CodePen.
Below is the HTML and CSS of how you will create this for the demo purposes I have left out the content from the HTML.
<div class="column-container">
<div class="column">
<p></p>
<p></p>
</div>
<div class="column">
<p></p>
</div>
<div class="column">
<p></p>
</div>
</div>
.column-container {
display: flex;
align-items: stretch;
}
.column {
width: 33%;
padding: 2rem;
}
.column:nth-child(1) {
background: red;
}
.column:nth-child(2) {
background: blue;
}
.column:nth-child(3) {
background: green;
}
As you can see from this CSS the only properties you will need to make these equal columns is align-items: stretch; on the parent item.
.column-container {
display: flex;
align-items: stretch;
}