How to adjust height of a DIV with respect to other DIV ?

Question

I am building a website for my school project. It have various nested DIVs. However the size of DIVs are different according to content. I want to make all the DIVs of variable height so that all get the height of the longest one. You can view my page here http://www.risingfaizabad.com/demo/

Please help me.

Answer 1

You can set absolute positioning of the nested DIV, specifying offsets of its top and bottom points relative to its parent DIV. Note that parent DIV itself must have position:absolute; or position:relative for this to work. The latter (position:relative) is pretty easy and safe

Answer 2

Normaly this is done with faux columns. But the background images is a bit more complex, so I suspect it wouldn't look nice.

Answer 3

Using jQuery (not CSS only) and assuming all DIVs have a common class to identify just those you care about.

$(function() {
    var maxHeight = 0;
    $('div.commonClass').each( function() {
         var height = $(this).height();
         if (height > maxHeight) maxHeight = height;
    });
    $('div.commonClass').height( maxHeight );
});

Or, if you care to simply use a plugin, there is the equalHeight plugin.

$(function() {
    $('div.commonClass').equalHeight();
});

Answer 4

Why not put content left, and content right in a container div, with a background image that is a repeat-y of the left and right column backgrounds. Then just use transparent for content-left and content-right.