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 trialmary battlebury
527 PointsTried using the clear fix in this lesson to get rid of the collapsing space at the top of the site didn't work?
Hi I've also been looking at the CSS layout supplement lesson plan There I learnt you can use the clear-fix property in CSS to get rid of the collapsing space issue caused by floats , by assigning the designated area in HTML with a class of group
The CSS is: .group:before: , .group:after;{ content:""; display:table; } .group:after;{ clear:both; }
I thought the issue was similar here in this lesson, and assigned the header with a class of group, CSS with the code as above
However nothing changed, even though I placed a div with class of container above the header.
Could anyone confirm whether it's not working because my only child with a float property is the header
I.E. Do I need more than two child elements with float properties?
:/
2 Answers
Brian Hayes
20,986 PointsYour CSS looks a little messed up. There seems to be colons and semi-colons missing in some places and added in others.
Remember that pseudo-elements such as 'before' and 'after' require two colons instead of one, both of which go before the words, and also your selector should never end with a colon or semi-colon.
Here is your code in proper syntax.
.group::before, .group::after {
content: "";
display: table;
}
.group::after {
clear:both;
}
In the future when you run into issues with CSS it's good to use the element inspector. If your CSS style does not appear at all in the inspector when you inspect the element you selected with your CSS, then most likely there is some sort of syntax error that needs to be corrected in the stylesheet.
mary battlebury
527 Pointsi think i got confused as in this lesson: https://teamtreehouse.com/library/css-foundations/the-box-model/floats-2,
the clearfix hack used only one colon and worked in the browser, thanks a lot for answering ! :)