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

Richard Contreras
Richard Contreras
7,026 Points
Posted by Richard Contreras
Richard Contreras
7,026 Points

Beginner CSS question regarding collapsing margins (at least I think that's the issue).

Please see the following codepen: https://codepen.io/pdxcoder/pen/yvZzEZ

Delete line 45 of the CSS, and you'll see the problem I had. The Kandinsky Publishing h1 on line 20 of the HTML and the color-grid Div on line 21 of the HTML are both nested inside the banner Div on line 19 of the HTML. But without that min-height on line 45 of the CSS, the h1 and the color-grid appear outside of the banner Div.

I'm just learning CSS so this is very confusing to me. I suspect the issue is a collapsed margin, but I'm not sure. I feel like the min-height fix I did is just a band-aid and that I would run into serious problems with different sized viewports.

Thanks for any help.

1 Answer

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

This is not "margin collapse", but a kind of "container collapse" due to the contents being floated, which takes them out of the normal document flow. This is typically handled by a technique called a "clearfix" which can be implemented with this code:

.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

Then, just add "clearfix" as an additional class to the container with the class "banner".

Another solution would be to place the h1 after the floated div in the HTML and just not float it also.