menu
Ad goes here

Saturday, 18 August 2018

How to create equal height columns?

Tutorials for Equal Height columns
Equal height columns have been required for all projects and will be needed forever. To make any row visually perfect with different amount of content you have to make equal height for all the columns. You can set fix height to make them equal, but this is not the right solution for responsive and dynamic websites.

I will recommend to use jQuery, it support all the browsers. You can also use CSS properties but it has compatibility issue in older browsers version.

Let’s start with jQuery equal height first then we will explain about the CSS properties for equal height.

Step 01: Create a HTML document using the following code.

<div class="md-container">
  <div class="md-col">
    <h2>A way of making equal height columns.</h2>
    <p> Looking for Graphic Resources? https://www.freepik.com/ </p>
  </div>

  <div class="md-col">
    <h2>A way of making equal height columns.</h2>
    <p> Looking for free images? Visit https://unsplash.com/, you can use photos from here for commercial and noncommercial purposes absolutely free.</p>
  </div>

  <div class="md-col">
    <h2> A way of making equal height columns.</h2>
    <p> A way of making equal height...</p>
  </div>
</div>


Step 02: Please also add jQuery library and two lines CSS in your HTML document to appear columns side by side.

    <style>
        .md-container { border 1px solid red; }
  .md-col { border: 1px solid blue; float:left; width: 30%; text-align:center; }
    </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


Step 03: Now the time to add jQuery to make all columns equal for all available browsers.

<script type="text/javascript">
function equalHeight(){
// Select and loop the container element of the elements you want to equalise
$('.md-container').each(function(){  

// Cache the highest
var highestBox = 0;

// Select and loop the elements you want to equalise
$('.md-col', this).each(function(){

// If this box is higher than the cached highest then store it
if($(this).height() > highestBox) {
highestBox = $(this).height(); 
}

});  

// Set the height of all those children to whichever was highest 
$('.md-col',this).height(highestBox);
  
}); 
};
$(window).load(function(){
equalHeight();
});
$(window).resize(function(){
$('.md-col').css('height','auto'); //Resize your browsers to check how it works even in small size devices.
equalHeight();
});
</script>


Here is the complete document:

<!doctype html>

<html>

<head>

<style>

 .md-container { border 1px solid red; }

 .md-col { border: 1px solid blue; float:left; width: 30%; text-align:center; }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>

   

<div class="md-container">

  <div class="md-col">

    <h2>A way of making equal height columns.</h2>

    <p> Looking for Graphic Resources? https://www.freepik.com/ </p>

  </div>

  <div class="md-col">

    <h2>A way of making equal height columns.</h2>

    <p> Looking for free images? Visit https://unsplash.com/, you can use photos from here for commercial and noncommercial purposes absolutely free.</p>

  </div>

  <div class="md-col">

    <h2> A way of making equal height columns.</h2>

    <p> A way of making equal height...</p>

  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

function equalHeight(){

// Select and loop the container element of the elements you want to equalise

$('.md-container').each(function(){ 

// Cache the highest

var highestBox = 0;

// Select and loop the elements you want to equalise

$('.md-col', this).each(function(){

// If this box is higher than the cached highest then store it

if($(this).height() > highestBox) {

highestBox = $(this).height();

}

}); 

// Set the height of all those children to whichever was highest

$('.md-col',this).height(highestBox);

  

});

};

$(window).load(function(){

equalHeight();

});

$(window).resize(function(){

$('.md-col').css('height','auto'); //Resize your browsers to check how it works even in small size devices.

equalHeight();

});

</script>



</body>

</html>



Result: If you like to view the result, just copy the above code and save it in html format and open it in your preferable browser.

Here are other ways of making equal height using CSS only but it may not work in older browsers version.

Equal Height Columns with table-cell

.md-container {

    display: table; /* Make the container element behave like a table */

    width: 100%; /* Set full-width to expand the whole page */

}

.md-col {

    display: table-cell; /* Make elements inside the container behave like table cells */

}



Equal Height Columns with Flexbox

.md-container {
    display: flex;
    width: 100%;
}
.md-col {
    flex: 1;
    padding: 16px;
}




4 comments:

  1. This information is meaningful and magnificent. After reading your article I got very much information about the creation of equal height columns and it resolved many of my doubts. If anyone looking for the best Web design company in Maine, Visit theportwebdesign.com

    ReplyDelete
  2. Damn so cool just yesterday found this site and today I know what's what good best online casino sites Now plans to sit here all your free time and fun and productive

    ReplyDelete
  3. Now the time to add jQuery to make all columns equal for all available browsers. godaddy coupon 2019

    ReplyDelete
  4. العزل الحراريّ هو منع حدوث التّبادل الحراريّ بين الحجرات التّي تتباين في درجة حرارتها، وتتمّ هذه الطّريقة باستخدام مواد عازلة للحرارة، كالصّوف الصّخري، وهو شائع الاستخدام، ويكون على شكل ألواحٍ يتم إلصاقها بالسّطح، أو باستخدام المزايكو، والذّي يوضع فيه الصّوف الصّخري على شكل لفائف، تفرد على سطح المنزل، ثمّ يصبّ فوقها الإسمنت، ومن المواد الأخرى المستخدمة في العزل الحراري، هي مادّة البيرلايت، ويتم فردها على السطح، وهي مادّةٌ عاكسةً للحرارة.

    شركة عزل خزانات
    شركة عزل خزانات بتبوك
    شركة عزل خزانات بحائل

    ReplyDelete