Equal height Joomla modules to the tallest one in a row - html

Question

There are several method on the web to set height of columns equal. One of the best, I think, is "Equal Height Columns with Cross-Browser CSS".
But there's a problem to apply that method on Joomla module structure and I couldn't figure out how to get it to work.
I used rounded module chrome (with one main background for module and another background image for inner DIV to wrap modules bottom) on Joomla template source so each module renders this way:
<div class="module_menu">
<div>
<div>
<div>
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>
</div>
</div>
</div>
and I use 3 modules in a row that wrapped in a parent DIV.
This is the code:
<div style="width:904px; margin:20px; float:left; overflow:hidden; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="width:904px; float:left; position:relative;">
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user4" style="rounded" />
</div>
<div style="float:left; width:288px; height:100%; margin-right:20px;">
<jdoc:include type="modules" name="user5" style="rounded" />
</div>
<div style="float:right; width:288px; height:100%;">
<jdoc:include type="modules" name="user6" style="rounded" />
</div>
</div>
</div>
</div>
And finally there's css related to the Joomla module's style:
div.module-gallery, div.module, div.module_menu {
width:291px;
background:url(../images/module-bg.png) no-repeat 50% bottom;
}
div.module div div div, div.module_menu div div div {
padding-right:15px;
padding-left:15px;
background:url(../images/module-bg-bottom.png) no-repeat 50% 100%;
padding-bottom:15px;
min-height:230px;
}
div.module div div div div, div.module_menu div div div div {
background:none;
}
How can I set modules height equal automate/dynamically with saving Module background style.

Answer 1

You need to take a look in templates/system/html/modules.php.
You can then create a copy of module chrome to output your module structure, which would be more beneficial since you code is kinda outrageous to read and isn't very semantic. i.e.
function modChrome_myModuleName($module, &$params, &$attribs)
{
$doc =& JFactory::getDocument();
$css = ".moduleOuter { your style }";
$css .= ".moduleInner{ your style }";
$doc->addStyleDeclaration($css);
?>
<div class="moduleOuter">
<div class="moduleInner">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
</div>
<?php
}
You'd then guess call the module with a style, like so:
<jdoc:include type="modules" name="left" style="myModuleName" />
From then on, you'll have a more semantic way of calling your modules and making it easier to get your CSS heights to work.