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 How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

mary battlebury
mary battlebury
527 Points

Tried 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
Brian Hayes
20,986 Points

Your 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
mary battlebury
527 Points

i 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 ! :)