Home/ Questions/Q 3361012
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T03:05:13+00:00

I have the following construct in my HTML document: <div class=content> <section class=column></section> <aside

  • 0

I have the following construct in my HTML document:

<div class="content">
<section class="column"></section>
<aside class="column"></aside>
</div>

And I want to match the heights of the section and aside to the height of the tallest of the two. I have the following script, but it’s not working, any ideas: 

  function unifyHeights()   
    {    
        var maxHeight = 0;    
        $('div.content').children('.column').each(function(){      
        var height = $(this).outerHeight();      
        if ( height > maxHeight ) { maxHeight = height; }    
    });    
    $('.column').css('height', maxHeight);  
  }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like nothing was wrong with the function in your question, because both columns get the same height when using this markup and code (taken from your Pastebin example):

    <!doctype HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
function unifyHeights()   
{    
    var maxHeight = 0;    
    $('div.content').children('.column').each(function(){      
        var height = $(this).outerHeight();      
        if ( height > maxHeight ) { maxHeight = height; }    
    });    
    $('.column').css('height', maxHeight);  
}
</script>
<style>
.content {
background-color: yellow;
}
section.column {
    width: 300px;
    float: left;
}
aside.column {
    width: 300px;
    floaT: left;
    display: inline;
}
</style>
</head>
<body>
<div class="content">
    <section style="background-color: pink;" class="column">jldkjfls<br/><br/></section>
    <aside style="background-color: green;" class="column">jldkjfls<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section>
<script>
    unifyHeights();
</script>
</body>
</html>
    • 0