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
orange sky
Front End Web Development Techdegree Student 4,945 Pointscolumns 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%}
thanks!!
2 Answers
Geoffrey Powell
15,358 Points1) 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;
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello 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!!