Forums

chrisburton

Has anyone had trouble with a sticky footer not actually sticking to the bottom or cutting off content? I'm using this one here. If I have a lot of content, it goes right under the sidebar without giving any room to breathe. See here (link removed).

If I have very little content, it doesn't stick to the bottom. Instead it goes right under the page-wrap/content. See here (link removed).

Edit: I am thinking jQuery would be the solution here, no?

Paulie_D

You refer to a page-wrap but I'm not seeing one in your HTML

chrisburton

@Paulie_D Oops, I forgot to add that. Updated the links above.

Paulie_D

I haven't played with it yet but I think you might be missing another internal wrapping div.


<div id="wrap">

	<div id="main">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>

at least according to a cursory reading of the linked article.

chrisburton

@Paulie_D I believe main refers to where the content goes. I could be wrong so I'll test it out.

Edit: You were right.

chrisburton

All right. So it solves the breathing room issue however, it still does not actually stick to the bottom of the page.

Updated Fiddle (link removed)

Paulie_D

I think all you need to do now is add 100% height to the html selector...

chrisburton

@Paulie_D Wow. I honestly didn't think that would make a difference. Really appreciate the help, thank you.

Paulie_D

No problem...

treehouse : what would you like to learn today?

Forums

[Solved] Sticky Footer Not Sticking to Bottom