Tried using the clear fix in this lesson to get rid of the collapsing space at the top of the site didn't work?

Question

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? 
:/

Brian Hayes · Accepted Answer

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. 
```css
.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 · Answer

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

Welcome to the Treehouse Community

Looking to learn something new?

mary battlebury

mary battlebury

Tried using the clear fix in this lesson to get rid of the collapsing space at the top of the site didn't work?

2 Answers

Brian Hayes

Brian Hayes

mary battlebury

mary battlebury