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 CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Mino Karadzhov
Mino Karadzhov
8,167 Points

My footer is collapsing, even after clearfix

Hey Guys, I'm having a problem with CSS Layout Project. Even after I use clerfix class on main-header container and on column container, my main-footer is still collapsing on medium and large screens. You can see my code here:

https://teamtreehouse.com/workspaces/36285612#

Thanks !

3 Answers

Steven Parker
Steven Parker
216,135 Points

You can't share a direct URL to a workspace, those are temporary and only exist while you are using it. But you can use the snapshot function (the little camera icon in the upper right) and share the link that makes.

But just guessing, it sounds like your clearfix may have a syntax error. If I recall, the floats only apply to the screen sizes where you are seeing the collapse.


Update: The HTML in the snapshot doesn't show the clearfix applied to the footer. You could add it like this:

    <footer class="main-footer clearfix">
Mino Karadzhov
Mino Karadzhov
8,167 Points

Hey again! This is my first time, I'm reaching the Treehouse community and I didn't knew anything about taking snapshots in workspaces. However, this is a link to the snapshot - https://w.trhou.se/ojc5txke3q

Jordan Wren
Jordan Wren
30,940 Points

You could also try adding footer { clear: both;} in the style.css file.