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 CSS Layout Techniques Float Layout The Float Clearfix

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Clearfix

I'm trying to use clearfix and for the life of me can't work out why it's not working. If I apply 'overflow: hidden;' to the .main-content-container then the problem is solved. But I want to use clearfix as it sounds as if it's best practice to do so.

Here's my code:

<body>
            <div class='main-content-container group'>
                <div class='container group'>
                    <div class='image'>
                        <a href='#'><img src="img/001018.jpg" alt=""></a>   
                        <div class='text'>
                            <p class='image-caption'>What the hell</p>
                        </div>
                    </div>
                </div>
                <div class='paragraph group'>
                    <div class='paragraph-1'>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

                        Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

                        Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
                    </div>
                </div>
            </div>      
        </body>

.main-content-container {
    margin-top: 95px;
    padding: 30px;
    background: purple;
}   

.container {
    position: relative;
    width: 35%;
    float: left;
    margin-left: 17%;
}

.paragraph {
    background: gold;
    max-width: 35%;
    float: right;
    margin-right: 13%;
    margin-top: 5%;
}

.paragraph-1 {
    padding: 5px;
}

.group:after {
    content: = "";
    display: table;
    clear: both;
}

1 Answer

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

It looks like your clearfix has a typo "=" in it. If you remove that, it should work as expected.

.group:after {
    content: = ""; /* remove this "=" */
    display: table;
    clear: both;
}
Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Thanks rydavim. I knew it was simple. Just needed a fresh pair of eyes!

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Definitely easier to find typos in code you didn't write. For me, it's very easy to read what I meant to type instead of what I actually typed.

Peter Hsiao
Peter Hsiao
2,086 Points
Peter Hsiao
Peter Hsiao
2,086 Points

And also remember, since ::after is a pseudo element, NOT a pseudo class, you want to use two colons. Save the single : for pseudo classes.