[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Sticky footers

Posted on 2009-05-01
8
Medium Priority
?
317 Views
Last Modified: 2012-05-06
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
Comment
  • 4
  • 4
8 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 24282777
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 24288341
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
 
LVL 43

Expert Comment

by:David S.
ID: 24288418
You're welcome, Ryan.

The scrollbar is because of the relative positioning on "#midsection #couch-container .couch-hide".
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 24288440
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
 
LVL 43

Expert Comment

by:David S.
ID: 24288449
In that case, give "#midsection #couch-container" overflow:hidden
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 24288465
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
 
LVL 43

Expert Comment

by:David S.
ID: 24288585
Setting right does nothing if position isn't set to a valid value other than static. Set it back to relative.
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 24290095
Thanks for  your help Krav.

Appreciate it.

Ryan
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question