...

View Full Version : css sticky footer margin help?



rakkarage
08-08-2010, 08:45 PM
i am trying to modify a sticky footer (http://www.cssstickyfooter.com/) to show a margin... it is easy for right and left with width:90% and margin:auto


| | | |
| | | |
| | | |
| | | |
but how to get the height to 90% (or show some kind of top & bottom margin) without messing up the floating footer


| ____ |
| | | |
| |____| |
| |
thanks

http://jsfiddle.net/56REF/


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,
textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
#header {
height: 33px;
line-height: 33px;
text-align: center;
background-color: green;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%; background-color:gray; }
#main {
overflow: auto;
padding-bottom: 33px; /* must be same height as the footer */
background-color: red;
height: 100%;
}
#footer {
position: relative;
margin-top: -33px; /* negative value of footer height */
height: 33px;
line-height: 33px;
text-align: center;
background-color:blue;
}

abduraooft
08-09-2010, 11:34 AM
Like
body { height: 100%; }
#wrap { min-height: 100%; background-color:gray; width: 90%; margin: 10% auto; }
#footer {
position: relative;
margin-top: -33px; /* negative value of footer height */
height: 33px;
line-height: 33px;
text-align: center;
background-color:blue;
width: 90%; margin: auto;
}

rakkarage
08-09-2010, 01:55 PM
thanks anyway but that doesn't seem to work

http://jsfiddle.net/56REF/35/

rakkarage
09-21-2010, 06:59 AM
http://jsfiddle.net/CZayc/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum