• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 319
  • Last Modified:

Sticky footers

I am working on a new layout here: http://www.catonthecouchproductions.com/new/

I am using this method to make my footer stick to the bottom: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

My goal is to have the bottom project section #bottom along with the #footer section to be placed on the bottom at all times.

I made sure my tags are working properly and my CSS declarations, it is not sticking to the bottom. Any thoughts?

CSS: http://www.catonthecouchproductions.com/new/style.css
#top-wrap{
	/* start styles for sticky footer */
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0 auto -202px;
	margin-left:60px;
}
#bottom,.push{height:202px;}

Open in new window

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 4
  • 4
1 Solution
 
David S.Commented:
It's not working because the element you gave min-height:100% to is not a direct child of <body>.

Remove the #wrap element and apply margins to the children of #top-wrap instead.
0
 
catonthecouchproductionsAuthor Commented:
Hey Krav,

Thanks! Check it out now: http://www.catonthecouchproductions.com/new/ - after moving it around, see how i have the scrollbar the horizontal one.

Any idea why, I have vertical scrollbar? I can't seem any margin throwing it off in FB

Ryan
0
 
David S.Commented:
You're welcome, Ryan.

The scrollbar is because of the relative positioning on "#midsection #couch-container .couch-hide".
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
catonthecouchproductionsAuthor Commented:
Hey,

The only reason I have that is without it, I can't have it display partially off the page, if you click it. I have jQuery that brings it in to the page.

Any thoughts?

Ryan
0
 
David S.Commented:
In that case, give "#midsection #couch-container" overflow:hidden
0
 
catonthecouchproductionsAuthor Commented:
I have this:

#midsection #couch-container{
      float:right;
      overflow:hidden;
}
#midsection #couch-container .couch-hide{
      right:-260px;
}

And still its not hanging off the right. New files are uploaded as well.

Ryan
0
 
David S.Commented:
Setting right does nothing if position isn't set to a valid value other than static. Set it back to relative.
0
 
catonthecouchproductionsAuthor Commented:
Thanks for  your help Krav.

Appreciate it.

Ryan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now