Hello People,
I tried all sticky footer CCS examples. All of them work fine. However, I have an issue. Suppose I have this:
<div id="wrap">
<div id="bodyleft">left</div>
<div id="bodyright">right</div>
<div id="footer">footer</div>
</div>
So, if I have height 100% for #bodyleft, the border will not extend to the end of the viewport up to the footer. It will just only cover one line of content.
Whether there is one line or 10 lines, I want the border to extend to the end of the page.
Any ideas?
Thanks!
Maria
EDIT:
<body>
<div id="wrap">
<div id="bodyleft">on left</div>
<div id="bodyright">
some text on right<br />
</div>
</div>
<div id="footer">footer </div>
</body>
</html>
* { margin:0px; padding:0px; }
html, body {height: 100%;}
#wrap {min-height: 100%;}
#footer {
position: fixed;
bottom: 0;
background-color: #f00;
height: 20px;
width: 100%;
margin-top:-20px; /* negative value of footer height */
}
#bodyleft{
width:222px;
float:left;
border:1px solid black;
overflow:auto;
padding-bottom:20px;
}
#bodyright{
width:777px;
float:right;
border:1px solid black;
overflow:auto;
padding-bottom:20px;
}