hi,
have a left side menu and would like a filler at the bottom to fill the space if content is taller than the menu.
should be easy but cannot get to work in IE7 - please advise thankyou
css
html
have a left side menu and would like a filler at the bottom to fill the space if content is taller than the menu.
should be easy but cannot get to work in IE7 - please advise thankyou
css
Code:
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000000;
font-family:Arial;
background-color: #E9E9E9;
padding:0;
margin:0;
height:100%;
font-size:14px;
}
#header {
width:100%;
height:198px;
float:left;
background-image:url(images/header.png);
background-repeat:repeat-x;
}
#layoutouter {
width:100%;
}
#layoutinner {
width:98.8%;
margin-left:14px;
background-color:#FFFFFF;
height:100%;
overflow:auto;
}
#content {
float:left;
background-color:#FFFFFF;
}
#contentinner {
float:left;
background-color:#FFFFFF;
width:805px;
padding-bottom:20px;
}
#menu {
width:161px;
background-color:#4E4E4E;
padding-left:6px;
padding-top:2px;
float:left;
height:100%;
border:#FF0000 1px solid;
}
#menufiller {
background-image:url(images/menuFILLER.gif);
background-repeat:repeat-y;
height:100%;
width:155px;
}
#footer {
width:100%;
height:33px;
clear:both;
}html
Code:
<body>
<div id="header"></div>
<div id="layoutouter">
<div id="layoutinner">
<div id="menu">
<div class="menuitem">ITEM1</div>
<div class="menuitem">ITEM2</div>
<div class="menuitem">ITEM3</div>
<!--THIS IS THE DIV I NEED TO STRETCH TO FILL HEIGHT-->
<div id="menufiller"></div>
</div>
<div id="content">
<div id="contentinner">Content is king</div>
</div>
</div>
</div>
<div id="footer"></div
</body>
</html>