CSS min-height not working properly

css, html

Solution

This may work:

#main{
    height : 100%;
}
#cont {
    min-height : 100%;
    /* Without the hacks */
}

Problem

Here is the situation, I have this 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 here: ``` 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*/ } ``` What I want to do basically is #cont div must have a min height of 100% (if I have small content) but will extend if have longer content. Any help would be appreciated. Note: The width size is just temporary for now. Thanks!

Original source