I just received a psd for a 100% height layout with a sticky footer, which you can see here! They wish to have a fixed height content div in the example left. The content div should have margins of 30px around top, bottom and left). I tried Paul O'bs method with a fixed div holding the background but I can't get the margin at the bottom to work. This is what I have:
HTML Code:<!-- #wrapper -->
<div id="wrapper">
<div id="header"></div>
<div id="content">
</div>
<div class="col"></div>
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
</div><!-- #footer -->
The bottom margin isn't there the content is going all the way down. What am I doing wrong or is this simply not the right approach?Code:html, body {
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
min-height: 100%;
margin-top: -75px;
position: relative;
clear:both;
z-index: 4;
overflow: hidden;
font-size: .8125em;
background: ;
}
* html #wrapper{
height:100%;
}
#footer {
width: 100%;
min-height: 75px;
position: relative;
clear:both;
z-index: 5;
font-size: .8125em;
background: url(../images/site/footer.png) 0 0;
}
#wrapper #header {
width: 100%;
border-top: 75px solid #FFF;
}
#wrapper #content {
width: 320px;
position: fixed
top: 60px
left: 30px;
z-index: 1;
}
.col {
width:320px;
height: 9999em;
position: fixed;
z-index:0;
top: 60px;
left: 30px;
bottom:105px;
background: url(../images/site/content.png);
}
html>body .col {
top: 60px;
}
Thank you in advance
