CODEWITHSUNDEEP
cssfootersticky-footer
svict4
svict4

Reputation: 530

Sticky footer under floated content

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.

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.

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.

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.

Here is an example of my current code: http://jsfiddle.net/ySru9/1/

I have taken the sticky footer code from here: http://www.cssstickyfooter.com/style.css and here http://ryanfait.com/sticky-footer/layout.css

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?

Upvotes: 0

Views: 2340

Answers (2)

Willem Van Bockstal
Willem Van Bockstal

Reputation: 2263

If you make the footer positioned absolute in your body, but make sure the body has some minimal height greater than your yellow container, this could work:

http://jsfiddle.net/willemvb/PZHvH/

Upvotes: 2

Prasad Jadhav
Prasad Jadhav

Reputation: 5208

try using:

#container 
{
  margin: 0 0 0 -100px;
  position: relative;    
}​

Check this fiddle: http://jsfiddle.net/ySru9/39/

Upvotes: 1

Related Questions