Here we will see how to equal height columns dynamic content with jQuery :

Current Design :

<script src=""></script>
<div class="container">
    <div class="column">This is<br />the highest<br />column</div>
    <div class="column">One line</div>
    <div class="column">Two<br />lines</div>
<div class="container">
    <div class="column">One line</div>
    <div class="column">Two<br>lines</div>
    <div class="column">One line</div>


Just put the below code modify as per your requirement.
Don’t forget to add jQuery min file into the code.

        var highestBox = 0;
            if($(this).height() > highestBox){  
                highestBox = $(this).height();  

Result :

We can see that the column height are same for same row. So we can make div height dynamic as per content.

There are currently no comments.