Kouzlo dvou stejně velkých divů

Prostě mám něco takovýho:
<div id="main">

<div id="mainLevo">
<h1>Nadpis 1</h1>

<div class="text">
<h2>Nadpis2</h2><p>bla bla bla bla</p>
</div>

<div class="text">
<h2>Nadpis2</h2><p>bla bla bla bla</p>
</div>

<div class="text">
<h2>Nadpis</h2><p>bla bla bla bla</p>
</div>

</div>

<div id="mainPravo">
<img src="img/home.PNG" alt="">
</div>

</div>

A jak teď udělat, aby div mainLevo a mainPravo měli stejnou výšku?

Buď jim nastav stenou pevnou výšku, nebo dej #main na pozadí obrázek, který bude simulovat sloupce.

Jenže, já potřebuju,aby když v jednom sloupci bude víc textu, tak se zvětší výška a jak udělat aby v tomto případě se zvětšil i sloupec vedle toho?

Přesně tohohle efektu se pomocí pozadí dá, alespoň na oko, dosáhnout.

#main obsahuje dva různě vysoké sloupce #mainLevo a #mainPravo.
#main se tedy roztáhne na výšku toho vyššího sloupce.

Pozadí #main může vypadat třeba takhle: http://www.wellstyled.com/files/css-2col-fluid-layout/fig1.gif

Ten obrázek - dvoubarevný proužek - se bude svisle opakovat po celé výšce #main, a tím vytvoří dojem dvou stejně vysokých sloupců.

Ještě související link:
http://www.wellstyled.com/css-2col-fluid-layout.html

a čo toto?
http://llook.wz.cz/weblog/spot/layout-se-stejnou-vyskou-sloupcu.php