Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Too much whitespace after footer

Making a mock-website to practice CSS and Java. On my homepage, where the content ends, the footer appears, and the page ends (see right). But on another page I'm creating (see left), after the footer, there is too much whitespace.

I doubt this is an uncommon problem, so any advice on things I can check for to fix this?

Thx ~Jay

3 Answers

Brandon Barrette
Brandon Barrette
20,485 Points

So I think you mean the whitespace after the footer? This happens when there isn't a lot of content on the page. What you are looking for is a sticky footer that is always on the bottom of the page, no matter how big the web browser. There are lots of approaches:

http://ryanfait.com/sticky-footer/

http://css-tricks.com/snippets/css/sticky-footer/

http://www.cssstickyfooter.com/using-sticky-footer-code.html

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Brandon: This was my first thought, too, but notice the scrollbars in the image...it looks like there's plenty of content higher up on the page.

It was a much shorter page and I guessed that might be the problem. These links look promising, I'll take a look.

I couldn't get stickyfooter to work for some reason, but I was sketching some things and decided to re-do the design for the page altogether. It should have more content so this shouldn't happen again. It might have also been a case of my div structure being messy causing something to collapse somewhere.

That said, a tried and tested solution like those in the links you've given me was exactly what I was looking for when I posted. I'll book mark them and save them for later.

You get the best answer. I tip my fedora to you goodsir.

Actually Shawn you were right after all. It was nothing to do with the amount of content on my page. It was to do with a complicated series of float: rights I'd applied to some divs that was causing the whole layout to collapse.

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points

Jay: Hard to say without seeing any of your code, but check to make sure you have all of your divs closed properly. I've had this problem a few times in the past and it turned out I'd missed a closing

</div>

tag or had an extra one thrown in there somewhere.

Sorry, you're right, I appreciate that. But because I don't know what the problem is precisely I didn't want to just Ctrl + C, Ctrl + V my entire main.css file. I think I might have almost managed myself by setting html { height: 100% } but I'll need to tinker a little more.

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Jay,

Without seeing your code, i'm guessing you might have an issue with one of you height settings in another piece code.
Do you have your footer position set to bottom?

It did collapse when I defined the height property for one of my divs. But it could have been any number of things. So I decided to re-do the page altogether.

You mean set footer { position: bottom }; ?