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!