Hello reader's , Today in my blog I will discuss about multiple ways to create equal height columns using CSS.
As working over some website , I found an issue related to the equal height of columns .
To resolve this , I searched many websites to get the exact solution for resolving my problem.
So, here are some ways to create columns of equal height.
Here is the html code containing some content in the columns :-
<div class="main">
<div class="container clearfix">
<div class="content">
<section>
<h1>This is the Main Content</h1>
<hr>
<h2>A sub heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
</section>
</div>
<div class="sidebar">
<aside>
<h2>This is a sidebar</h2>
Sign up to the newsletter!
</aside>
</div>
</div><!-- /.containter -->
</div><!-- /.main -->
Here in this code I have created a main div with nested two div inside the container containing some content within them.
Creating equal height columns using margin , padding and overflow : -
This method uses margin , padding and overflow technique for creating equal height columns .
In this I have set a big padding at the bottom of each floated elements used in the code and also with an equal negative margin at the bottom side of the same elements.
Basically, I used this trick to hide the parent container div using overflow.
Below is the CSS code for the following :-
.main .container {
padding-right: 330px;
overflow: hidden;
}
.content {
float: left;
width: 100%;
background-color: red;
}
.sidebar {
float: right;
margin-right: -330px;
width: 300px;
background-color:green;
}
.content,
.sidebar {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
section,
aside {
padding: 30px
}
I have also set the media query for some responsive flow , below is the code for it :-
@media all and (max-width: 840px) {
.main .container {
padding: 0 30px;
overflow: visible;
}
.content {
float: none
}
.sidebar {
float: none;
margin-right: 0;
width: 100%;
}
.content,
.sidebar {
padding-bottom: 0;
margin-bottom: 0;
}
.content {
margin-bottom: 30px
}
}
Creating equal height columns using pseudo classes and position : -
This method uses pseudo class : after . The pseudo class places the content just after the element.
On giving the parent container the position as relative , the pseudo elements will set to position absolute with the height as 100%.
We also need to position the pseudo elements from the required distance from the container and apply the overflow as hidden.
main .container {
padding: 0 360px 0 30px;
position: relative;
overflow: hidden;
}
.content {
float: left;
width: 100%;
background-color:yellow;
}
.sidebar {
float: right;
margin-right: -330px;
width: 300px;
background-color: red;
}
.content:after,
.sidebar:after {
display: block;
position: absolute;
height: 100%;
content: "";
background-color: #fff;
}
.content:after {
left: 30px;
right: 360px;
}
.sidebar:after {
right: 30px;
width: 300px;
}
section,
aside {
padding: 30px
}
I have also set the media query for some responsive flow , below is the code for it :-
@media all and (max-width: 840px) {
.main .container {
padding: 0 30px;
overflow: visible;
}
.content {
float: none;
margin-bottom: 30px;
}
.sidebar {
float: none;
margin-right: 0;
width: 100%;
}
.content:after,
.sidebar:after {
display: none
}
}
Creating equal height columns using table display :-
This method uses the CSS property table display. Using the table display property we need to be carefull of the browser compatibility.
Below is the html code for the above method :-
<div class="main">
<div class="container">
<div class="table">
<div class="row">
<div class="col content">
<h1>Section 1</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, laborum, repudiandae, soluta sapiente architecto et fugit laboriosam exercitationem error quisquam doloribus veritatis consequatur ipsum consectetur ad maxime obcaecati quod ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, sunt, soluta, vero, illo in dolore cum velit aperiam eius quidem ad quasi inventore rerum ab rem itaque et ullam earum.</p>
<p>I hope your site is more interesting than this demo page.</p>
</div>
<div class="col sidebar">
<h2>Sidebar</h2>
<p>Subscribe to the newsletter!</p>
</div>
</div>
</div>
</div>
</div><!-- #main -->
In this code , I need to create a main div with the nested divs . I have created a table with the row and column as the div nested inside the main div.
The two columns i.e the content and the sidebar has the required content inside it forming a table with the row and columns.
Below is the CSS code for the above example :-
.main .container {
padding: 0 0
}
.table {
display: table;
border-collapse: separate;
border-spacing: 30px 0;
}
.row {
display: table-row
}
.col {
display: table-cell;
background-color: orange;
padding: 30px;
}
.col.sidebar {
width: 300px
}
In the CSS code , I need to set the parent div to display as table . I also need to reset the container padding to zero so that the border-spacing property can be use.
I have also set the media query for some responsive flow , below is the code for it :-
@media all and (max-width: 840px) {
/* demo 3 */
.main .container {
padding: 0 30px
}
.table {
display: block
}
.row {
display: block
}
.col {
display: block
}
.col.content {
margin-bottom: 30px
}
.col.sidebar {
width: 100%
}
}
Conclusion : -
Hence, I have created equal height of columns using multiple ways in CSS.
0 Comment(s)