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 Basics (2014) Basic Layout Clearing Floats

Nikhil Chaudhary
Nikhil Chaudhary
663 Points
Posted by Nikhil Chaudhary
Nikhil Chaudhary
663 Points

Why my clearfix not working?

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

}

I am using this clear fix property for my container which is holding an image and a paragraph but it's not working but when I simplly use clear:both; property in css everything works perfectly.

What am i doing wrong?

Bram Dijkhuis
Bram Dijkhuis
5,746 Points
Bram Dijkhuis
Bram Dijkhuis
5,746 Points

Do you have a url where we can check what's happening?

2 Answers

Maximus Bell
PLUS
Maximus Bell
Courses Plus Student 591 Points
Maximus Bell
Maximus Bell
Courses Plus Student 591 Points

Hey Nikhil, you must use clearfix on the parent elemnt of these floating elements.Here is an example hope it'll help you

/Here your HTML code/ <div class="parent"> <div class="child1"> <img src="img/ first_Child.jpg"> <h3>I'm the first Child</h3> </div>

    <div class="child2">
         <img src="img/Second_Child.jpg">
         <h3>I'm the Second Child</h3>
    </div>

</div>

/Here your CSS codes/

.child1, .child2{ width: 46.5%; }

.child2{ float: right; }

.child1 { float: left; } .parent:after { content: ""; display: table; clear: both; }

Nikhil Chaudhary
Nikhil Chaudhary
663 Points
Nikhil Chaudhary
Nikhil Chaudhary
663 Points

I don't have a URL, I am working on Brackets.

Bram Dijkhuis
Bram Dijkhuis
5,746 Points
Bram Dijkhuis
Bram Dijkhuis
5,746 Points

Can you paste a html snippet in here and the css styles that belong to the div.group and the img and the paragraph? Seems to me your clearfix is okay so maybe the problem lies elsewhere.