prob. ved brug af float

Aloha

Hmm, har et mindre problem som lettest illusteres med - tada - problemet...

tjek:
http://desi-dev.dk/mfa/CSS-float-prob/
(style: http://desi-dev.dk/mfa/CSS-float-prob/style.css)

Det jeg gerne vil have er at den blå boks får samme højde som den grønne boks (altså fylder pladsen fuldt ud!)

Den relevante kode:
--
  <div id="content">
    <div id="main_left">Her er venstre<br>h<br>e<br>j<br>lala</div>
    <div id="main_right">Her er højre</div>
  </div>
---

---
#main_left {
    background-color: green;
    float: left;
    width: 490px;
    padding: 5px;
}
#main_right {
    background-color: blue;
    width: 189px;
    float: right;
    padding-left: 5px;
    border-left: 1px dashed black;
    height: 100%; // virker _ingen_ steder
}
--

Håber nogle sagkyndige kan sige hvad der gøres galt... det har irreteret mig i en rum tid nu...

Morten