2 Replies - 5749 Views - Last Post: 15 January 2012 - 04:36 AM

#1 GolfyMcG  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 14
  • Joined: 22-November 11

Footer Moving with Content

Posted 15 January 2012 - 02:44 AM

Hey everyone,

I'm having some issues with getting my footer to follow the bottom of my page's content. I believe some people have referred to this as a sticky footer but I'm not quite sure if that's what I'm looking for. In short, I want to be able to add content to the "main" element and have the footer move down with the bottom of it.

I looked around Google for a solution and could not get any of the solutions to work for me. I've got one of the solutions in the third section of my .css file (called sbc.css).

The website is Sound Body Challenge

If my request is unclear I'll try to rephrase. I've only started learning this about 3 or 4 days ago and this has been my major problem thus far.


PS. I'd love to get as much feedback as you're willing to give on my website in general. I wrote everything at first and it was a mess probably because it was the first time I've used stylesheets. Then I rewrote everything using a slightly better arrangement. Let me know what you think of it and if there are any changes you'd make.

Is This A Good Question/Topic? 0
  • +

Replies To: Footer Moving with Content

#2 yasir khan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 15-January 12

Re: Footer Moving with Content

Posted 15 January 2012 - 04:07 AM

i think you have to give your footer position static in css
Was This Post Helpful? 0
  • +
  • -

#3 Tayacan  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 145
  • View blog
  • Posts: 275
  • Joined: 18-January 11

Re: Footer Moving with Content

Posted 15 January 2012 - 04:36 AM

Hi there!

Since I'm working on a website which needs a sticky footer, too, I thought I might as well look into it. A quick google search came up with this method, which works surprisingly well, even without all the fancy css hacks (I didn't give my footer a specific height, nor did I give my wrapper div the negative margin they suggest).

The idea is that you have your wrapper and footer after each other, and then in the bottom of the wrapper you've got an empty div which serves no other purpose than pushing the footer down.

As to your website in general - that's pretty cool, especially considering how new you are to this! Keep up the good work :-)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1