Another Sticky footer issue. 100% width div with repeating bg and div floated to the right

Question

I know this question is an old one but having researched and tried and tried for 2 days now i am still not having any luck and I hope someone here could give me some advice!

Problem:

I have a page that i need to apply a sticky footer, simple normally but here's where i'm having the problem.

I can get the footer div(#footer) to stick to the bottom with out a problem (it's 100% width with a repeating background image) Then within this DIV I float another(#cut) with a bg-image to the right( the scissors in my example). This also works fine.

The problem is that I need another 100% width div(#footer-link-wrap) below the primary one so that I can float some nav links(#links) in the centre. Within the #footer-link-wrap i need another image floated all the way to the right, tried doing this with a positioned background but i can't get it to work.

I've totally hit a wall and I would greatly appreciate any feedback, i've just getting back into design after a long break and it's probably me making a silly mistake.

css as follows:

* {
margin:0;padding:0;
} 


html, body {

 height: 100%;
 background-color:#000;
 }

#wrap {
 min-height: 100%;
 }

#main {
 overflow:auto;
 padding-bottom: 60px;
 }  

#footer {
 position: relative;
 margin-top:-20px; 
 height: 20px;
 clear:both;
 width:100%;
 background:url(foot-hair.png) repeat-x;
 background-position:0 8px;
}

#cut{
 float:right;
 width:40px;
 height:20px;
 background: url(haircut.png);
}

#footer-link-wrap{

 margin-top:-40px; 
 height:40px;
 width:100%;
 background:url(hair-fall.png) no-repeat;
 background-position:bottom right;

 }

#links{
 position:relative;
 margin-left:auto;
 margin-right:auto;
 width:800px;
 background-color:#fff;
 }

/*for opera
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}*/`

Here's a link to the example float help

Answer 1

Have tou tried this implementation: http://www.cssstickyfooter.com/

Update:

here are the problems I found:

• you haven't set properly the basic configuration for the sticky footer according to the specification. The padding-bottom of #main was not the same as the height of the footer;
• You used float when you could just have used text-align for you #links #footer-link-wrap divs.
• Some other little things that i can't remember, try using this css sheet instead.

/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 60px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -60px; /* negative value of footer height */
    height: 60px;
    clear:both;}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}




/**********************************
*** Start of your modifications ***
***********************************/
html, body {
background-color:#000;
}

#footer {
background:url(http://www.d-syne.com/float/foot-hair.png) repeat-x;
}

#cut{
width:100%;
height:20px;
background: url(http://www.d-syne.com/float/haircut.png) no-repeat bottom right;
}

#footer-link-wrap{
height:40px;
width:100%;
text-align: center;
background:url(http://www.d-syne.com/float/hair-fall.png) no-repeat bottom right;
 }

#links{
text-align: left;
margin: 0 auto;
width:800px;
background-color:#fff;
color: black;
}

good luck.