CSS layout

Hej. Jeg forsøger mig i øjeblikket for første gang med at lave et komplet layout i CSS og XHTML, uden tables. Derfor er jeg stødt på et problem. Jeg vil gerne have at min menu er ligeså høj som indholdet af siden.

Her er mit HTML:

<div id="content">
    <div id="menu">
        Menu
    </div>
    <div id="main">
        Main<br />
        Main<br />
        Main<br />
        Main<br />
        Main<br />
        Main<br />
        Main<br />
    </div>
</div>


Og jeg har lige nu flg. CSS:

#content{
    position: relative;
    width: 750px;
}

#main{
    position: relative;
    width: 600px;
    height: 100%;
    float: right;
}

#menu{
    position: relative;
    width: 145px;
    height: 100%;
    float: left;
    border: 1px solid green;
}


Hvordan gør jeg? :)


Jeg har forsøgt at kigge på www.positioniseverything.com, men der kunne jeg ikke overskue deres løsninger.

På forhånd tak.