title: Another Sticky footer issue. 100% width div with repeating bg and div floated to the right
body: <p>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!</p>
  
  <p>Problem:</p>
  
  <p>I have a page that i need to apply a sticky footer, simple normally but here's where i'm having the problem. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>css as follows:</p>
  
  <pre><code>* {
  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;
  }*/`
  </code></pre>
  
  <p>Here's a link to the example <a href="http://d-syne.com/float" rel="nofollow">float help</a></p>