title: Sticky footer under floated content
body: <p>I have a page where the content is floated in the center so that in any browser size, the content div will always be smack bang in the middle.</p>
  
  <p>Now, I've gone ahead and added a sticky footer to the page, however when the browser window is smaller than expected, the footer displays in front of the floated content.</p>
  
  <p>I am not exactly up to speed with how clearing floats works or exactly how absolute positioning affects relative positioning. I am aware that once I make the footer absolute, it becomes independent of all the other divs, which is naturally not what I want, but this is where I am getting stuck.</p>
  
  <p>My question is, how can I make the sticky footer display at the bottom of the page, but stay under (by under I mean below) the floated content if the height of the browser screen is smaller.</p>
  
  <p><strong>Here is an example of my current code: <a href="http://jsfiddle.net/ySru9/1/" rel="nofollow">http://jsfiddle.net/ySru9/1/</a></strong></p>
  
  <p>I have taken the sticky footer code from here: <a href="http://www.cssstickyfooter.com/style.css" rel="nofollow">http://www.cssstickyfooter.com/style.css</a> and here <a href="http://ryanfait.com/sticky-footer/layout.css" rel="nofollow">http://ryanfait.com/sticky-footer/layout.css</a></p>
  
  <p>I’m sorry if this is a repeat of another question on SO, but I have trawled through and couldn’t exactly find anything the same. I assume that there is some yucky jquery stuff that I need to delve into?</p>