css floating footer margin

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

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;
}

http://jsfiddle.net/56REF/

thats great... thanks a lot. it does have some problems with using the border as padding when using rounded corners (http://jsfiddle.net/Lce3m/) is there no way to use border or padding of the body to push against html or header margin or padding to push against body? i tried moving the white border to body but not work... (http://jsfiddle.net/CZayc/4/) thanks for your help

rakkarage 2010-08-09 19:10:01

Well I used border to eliminate the problem of margin at the top of the first element.You can easily use margin at the bottem, no problem.You could try adding an extra element to move the header down like this: http://jsfiddle.net/4gKhr/

Norbert de Langen 2010-08-10 06:38:37

ansaurus

tags:

views:

answers:

css floating footer margin

related questions