Friday 15 March 2013

Sticky Footers

I was having issues with my footers deciding to set up shop halfway up the page, this was a result of a number of things.
As i had to add more rows than some for other pages which affected the height of my wrappers, as they are percentage based, coding the percentage to auto on the wrapper knocked all the of the image sizes out of sync.Therefore as a solution i used sticky footer to place the footer at the bottom of the page. I included a sign up form for a newsletter in this, as well as the copyright and the ink to my portfolio as a designer.
Anyway, although the sticky footer worked i had some issues with the height making the footer so far away from the wrapper on some pages, to a point where you'd spend about 5 seconds scrolling down just to see the footer.
I have come to a solution with this by adding a class onto the longest pages, and on the CSS of the shortest pages adding a minus bottom margin just to pull the footer up without affecting other pages.
It now looks like this;



Overall i'm really happy with the solution to this as the classes are easily addable when i pass the site on to my clients web team should they need to add more products.

No comments:

Post a Comment