Help with footer
I could do with some help with the footer in my layout
The way I have it at the moment is position: absolute; with bottom: 0;. obvously if the page is bigger than the window this causes the footer to overlap the content.
The footer has to be within the #main-cent div as this is what puts the 'leafy' edges on the main background (the page background (the flowers) is a large jpg fixed to the bottom center of the window, the two are seporate for 2 reasons. firstly the 'leaves' are a just a 2 colour gif, and the 'flowers' can be compressed Jpeg. Also the 'leaves' will scroll with the page while the 'flowers' remain static in the background).
I can do a 'normal' footer but having to put it within the #main-cent div makes my usual method not work.
Thanks in advance for any new ideas on how to achive this.
Couldn't be simpler :)
Just add position:relative to the main container then the footer stays at the bottom of that and not the window.
Also increase your clearfooter divs height by about 20px to stop the text from sliding under the footer.
margin-right: auto;/*centres in compliant browsers*/
margin-left: auto;/* " " */
width: 780px; /*An auto centering layer, width must be assigned*/
min-height: 100%; /* Compliant browser height, This will fill entire browser window height */
background: url(http://www.designed4hits.com/dev/wil.../bgnd-tile.gif) repeat-y center;
text-align: left;/*text align must be declared in all items due to 'text-align: center;' being in the body tag*/