Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Bob Sutherton
Bob Sutherton
20,160 Points

Why is my .wrapper div collapsing?

My wrapper div does not contain the content within it. It doesn't go to the full height of its child elements. It stops a little over half way. I have linked to my codepen, and my wrapper div has a background color so it is easy to see what it is doing. I have been having trouble with this for a while and haven't been able to find the solution.

http://codepen.io/brockcallahan/pen/vHACa

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi James,

You have a few mismatched tags in your html. I think you had a second closing header tag at the bottom and you were closing your nav after the first closing header tag. Not causing the problem but it's invalid html.

As Federico noted, your height: 100% is messing things up. Not sure what your goal was with all those 100% heights. If you were trying to make sure that all of your background image shows up even with a short amount of content then you need to set a min-height on your .content element. The min-height would match the height of that background image.

federicococheofiletti
federicococheofiletti
5,289 Points
federicococheofiletti
federicococheofiletti
5,289 Points

Use "min-height" property instead of "height" in the .wrapper selector. just tested your codepen and it works fine!

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Thanks for the help guys. I was intending to make a "sticky footer" with those 100% heights. I corrected the html error. I changed things around a little bit. I didn't really think the design of this through it is just something I was kind of throwing together to experiment with.

That did correct the problem with the .wrapper collapsing, although I am a little confused as to why min-height doesn't work the same as height if they both have the same value.

Thanks again for the help.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi James,

In general, when you use height the element is stuck at that height. It can't be any shorter or taller than that regardless of what content is in it. When you use min-height you're basically saying, "You can't get any shorter than this but you can get taller if the content demands it.

Did you want your footer always at the bottom of the page regardless of whether you had a short or long page. Or did you want it at the bottom for short pages only and it would be off the bottom of the viewport for long pages and work like normally?