How to Equalize DIV Column Height With CSS

Equalizing the height between the two columns with css sometimes makes it difficult for web designers, the layout has been made in two columns, it turns out that when one column has enough content it will look lame, or one of them looks longer while the other one is shorter.

Well, in this article, tutorial-webdesign.com will give some tips so that the columns that are made can match or look the same in height between the left and right.

CSS Column Height
CSS Column Height

Creating HTML
First we create an example layout, here we create two columns, namely col-left and col-right.

Sidebar

Content sidebar…

Article

Details of the article…

Article

Details of the article…

There we can see that we created a .main class which includes a .col-left class and a .col-right class whose contents can be adjusted according to needs.

So that .col-left and .col-right are always visible with the same height then we add a css script as below.

CSS styling
*{margins: 0;padding: 0;}
.main{
width: 500px;
margins: 20px auto;
overflow: hidden;
}
.col-left,
.col-right{
float: left;
width: 200px;
padding-bottom: 40000px;
margin-bottom: -40000px;
background: green;
color: white;
}
.col-Right{
width: 300px;
background: yellow;
color: black;
}
If we look at the CSS code above, what’s interesting is the padding-bottom section: 40000px; and margin-bottom:-40000px; so that it doesn’t look very high with a value of 40,000px, we give the .main class overflow:hidden, so that the long part will be hidden, so now the height only depends on the text in the .main class.

Demo & Source Code
For demo and code can be seen at the following link here.

That’s it.
So many tips and tricks this time, hopefully it helps your difficulties with CSS

Greetings Web Design Indonesia