CSS min-height ne fonctionne pas correctement

Voici la situation, j'ai ce code html:

<div id='main'>
    <div id='menu'>
        Menu Items Here
    </div>
    <div id='cont'>
        Content Here
        <div id='footer'>Some Footer</div>
    </div>
</div>

CSS ici:

html, body {
   height: 100%;
   width : 100%;
   margin: 0;
   padding: 0;
}

#main{
    overflow : auto;
    background-color: yellow;
    width : 100%;
    min-height : 100%;
}

#menu {
    background-color: red;
    float : left;
    width : 300px;
}

#cont {
    margin-left : 300px;
    float : right;
    background-color: orange;
    width : 100px;
    min-height : 100%;
    height: auto !important; /*min-height hack*/
    height: 100%;            /*min-height hack*/
}

Ce que je veux faire est fondamentalement #cont div doit avoir un min hauteur de 100% (si j'ai de petites de contenu), mais peuvent s'étendre si avoir plus de contenu.

Toute aide serait appréciée.

Remarque: La largeur de la taille est juste temporaire pour l'instant.

Merci!

source d'informationauteur Eddie