Ho dei gruppi di menu formati da div che mostro a righe di 4.



Come potete vedere vorrei che la seconda riga sia sempre tale (cioè allineata) e provo a mettere un <hr />, ma questo mi va all'altezza della fine del 4 blocco anzichè posizionarsi sotto al blocco più lungo, spezzandomi le colonne più alte.

Sapreste come risolvere?
Vorrei ricostruire una specie di struttura tabellare ma l'altezza dà sempre tantissime grane.

codice:
<div class="gruppoMenu">
	<div class="testatamenu">titolo</div>
	<div>contenuto menu</div>
</div>
<div class="gruppoMenu">
	<div class="testatamenu">titolo</div>
	<div>contenuto menu</div>
</div>
<div class="gruppoMenu">
	<div class="testatamenu">titolo</div>
	<div>contenuto menu</div>
</div>
<div class="gruppoMenu">
	<div class="testatamenu">titolo</div>
	<div>contenuto menu</div>
</div>
<hr style="clear:both;" />
<div class="gruppoMenu">
	<div class="testatamenu">titolo</div>
	<div>contenuto menu</div>
</div>
codice:
.gruppoMenu {
	height: 100%;
	height: 80px;
	float: left;
	width: 24.9%!important; /* IE 7.0 */
	width: 24.9%; /* IE 6.0 */
	margin: 0;
	margin-left: 1px;
}

html>/**/body .gruppoMenu /* FireFox*/
{
width: 24.8%!important;
}
Cosa mi suggerite per allineare la seconda riga all'altezza della colonna più alta della riga precedente?

Oppure come realizzereste questa struttura 'a tabella' usando i div?
Come è meglio gestirsi le altezze secondo voi?