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 Techniques Float Layout Floating Columns and Images

columns and margin collapese

Hello! In the lecture video Floating columns and images,

1) when the instructor applies a floating left property on .col, nothing happens, would you happen to know why nothing happens with jus this syntax: .col { padding:20px; floating:left}

2) then he adds width:30% to .col, and it results in a margin-collapse. The footer begin to wrap around the secondary content. I thought a margin collapse creates a thin, and long white strip and it is caused by the parent container, however I don't see this thin, white strip above these columns. How does a margin collapse really look when it comes to columns that are inside of a parent container? .col { padding:20px; floating:left; width:30%}


2 Answers

Geoffrey Powell
Geoffrey Powell
15,358 Points

1) It's a little misleading. Actually the column container IS collapsing and the footer is getting pulled up behind the floated content. After he refreshes the page you'll see the gray of the footer inside the 'extra content' section and the footer is all bunched up weirdly toward the bottom right.

2) The collapse will take on the appearance of the background styling of whatever element is getting screwed up by the float. In this case, it's the footer. The collapse is really just a result of the element below the floated items trying to figure out how to treat the floats. If the footer element wasn't there, there would still be a container collapse but you just wouldn't see it. Someone else may have a better explanation.

Remember, float: left; --- not floating: left;

Hello Geoffrey,

Sorry for this delayed response; yes, I have looked at the videos a few times to see what a margin collapse really looks like in different situations, and tried it out in my text-editor for a first hand feel, I now can see what you mean. thanks!!