title: Equal height Joomla modules to the tallest one in a row
body: <p>There are several method on the web to set height of columns equal. One of the best, I think, is &quot;<a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" rel="nofollow noreferrer">Equal Height Columns with Cross-Browser CSS</a>&quot;.</p>
  <p>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.</p>
  <p>I used <strong><a href="http://docs.joomla.org/Customising_the_way_modules_are_displayed#What_is_Module_chrome.3F" rel="nofollow noreferrer">rounded module chrome</a></strong> (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:</p>
  <pre><code>&lt;div class=&quot;module_menu&quot;&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;div&gt;
          &lt;h3&gt;Main Menu&lt;/h3&gt;
          &lt;ul class=&quot;menu&quot;&gt;
            &lt;li&gt;&lt;!-- various menu items --&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and I use 3 modules in a row that wrapped in a parent DIV.</p>
  <p>This is the code:</p>
  <pre><code>&lt;div style=&quot;width:904px; margin:20px; float:left; overflow:hidden; position:relative;&quot;&gt;
      &lt;div style=&quot;width:904px; float:left; position:relative;&quot;&gt;
          &lt;div style=&quot;width:904px; float:left; position:relative;&quot;&gt;
              &lt;div style=&quot;float:left; width:288px; height:100%; margin-right:20px;&quot;&gt;
                  &lt;jdoc:include type=&quot;modules&quot; name=&quot;user4&quot; style=&quot;rounded&quot; /&gt;
              &lt;/div&gt;
              &lt;div style=&quot;float:left; width:288px; height:100%; margin-right:20px;&quot;&gt;
                  &lt;jdoc:include type=&quot;modules&quot; name=&quot;user5&quot; style=&quot;rounded&quot; /&gt;
              &lt;/div&gt;
              &lt;div style=&quot;float:right; width:288px; height:100%;&quot;&gt;
                  &lt;jdoc:include type=&quot;modules&quot; name=&quot;user6&quot; style=&quot;rounded&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And finally there's css related to the Joomla module's style:</p>
  <pre><code>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;
  }
  </code></pre>
  <p>How can I set modules height equal automate/dynamically with saving Module background style.</p>