Create equal height li blocks irrespective of the content
Posted By : Milind Ahuja | 19-Aug-2016
This blog discuss a method to creat equal height li blocks or columns irrespective of the content inside each li column that work on almost all major browsers. Basically, we create a layout in which all the li columns assume the height of the tallest column.
In this method we are going to create a normal ul li list which is enclosed in a div. The enclosing div is given a display: table and each enclosed li is given a display:table-cell attribute.
I'll discuss this an example:
Here is the markup for this method:
Here's the CSS:
.row{
display: table;
}
.row ul {
display: inline-flex;
}
.row ul li {
display: table-cell;
float: none;
}
Advantage:
This method is very easy to implement than other method using Javascript which saves lot of time and lines of code.
Disadvantage:
This method doesn't work in few versions of IE.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.