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

Andrew Probert
Andrew Probert
1,862 Points
Posted by Andrew Probert
Andrew Probert
1,862 Points

Clearfix not working for me. What am I missing?

So I'm creating a practicing site to try what I'm learning. By far the most challenging part for me is laying out and positioning elements where I want them. I'm trying floating elements and using the clearfix, but the containing div is not clearing the floated elements. Can someone take a look at my code and help figure out what the problem is? Thanks so much!

\\html <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Me practicing coding</title> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> </head>

<body> <div class="top"></div> <div class="intro" class="group"> <div class="col-left"> <h1 class="heading">About Me</h1> <img src="img/intro-icon.png" alt="intro icon" id="icon1"> </div> <div class="col-right"> <p id="me">I am trying to learn how to code.This is my test site. We'll see how it turns out. Hopefully steady progess is made and it does not end with me throwing my hands up in frustration.</p> </div> </div> <div class="learn"></div> <div class="layout"></div> <div class="resources"></div> <div class="bottom"></div> </body>

</html>///

\\css

  • { -webkit-box-sizing: border-box; -moz-box-sizing: border-box box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

p, h1, h2, h3 { margin-top: 0; }

div { min-height: 10%; }

p { font-family: "Open Sans Condensed" , sans-serif; font-size: 1.5em; }

h1 { font-family: "Open Sans Condensed" , sans-serif; font-size: 3em; }

.top { background: #CDD5DD; position: relative; } .intro { background: #FFC266; border: 2px dotted black; } .learn { background: #3366CC; } .layout { background: #FF4747; } .resources { background: #33D685; } .bottom { background: #4E545A; } .heading { display: block; border: 1px dotted black; margin-top: 2%; } .col-right , .col-left { border: 2px dotted black; margin-top: 5%; min-height: 100px; } .col-left { width: 43%; float: left; margin-left: 5%; margin-right: 3%; }

icon1 {

max-width: 100%;
width: 15%;
padding: 0;
margin: 0;

} .col-right { width: 43%; float: right; margin-right: 5%; margin-bottom: 5%; }

me {

color: white;

}

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

5 Answers

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

For the clear fix it has to be used as a class in the html parent container in other words you don't apply it directly to the element but instead the element that its being contained within your clear fix looks right it seems like your clear fix is fine in the css and also you've set width so i'd check your html

Andrew Probert
Andrew Probert
1,862 Points
Andrew Probert
Andrew Probert
1,862 Points

I got it working by changing the class name of the clearfix from .group to .intro(which is the class name I gave to the parent div. But I'm not sure why it doesn't work with .group. I also added the class name "group" to the parent div. Thanks in advance for any help

Andrew Probert
Andrew Probert
1,862 Points
Andrew Probert
Andrew Probert
1,862 Points

Here's the html for that part. I thought I added it to my question earlier, but I don't see it. ///html <div class="intro" class="group"> <div class="col-left"> <h1 class="heading">About Me</h1> <img src="img/intro-icon.png" alt="intro icon" id="icon1"> </div> <div class="col-right"> <p id="me">I am trying to learn how to code.This is my test site. We'll see how it turns out. Hopefully steady progess is made and it does not end with me throwing my hands up in frustration.</p> </div> </div> ///

Andrew Probert
Andrew Probert
1,862 Points
Andrew Probert
Andrew Probert
1,862 Points

\\html <div class="intro" class="group"> <div class="col-left"> <h1 class="heading">About Me</h1> <img src="img/intro-icon.png" alt="intro icon" id="icon1"> </div> <div class="col-right"> <p id="me">I am trying to learn how to code.This is my test site. We'll see how it turns out. Hopefully steady progess is made and it does not end with me throwing my hands up in frustration.</p> </div> </div> \\

Andrew Probert
Andrew Probert
1,862 Points
Andrew Probert
Andrew Probert
1,862 Points

I guess I'm doing something wrong with Markdown as my html code is not displaying.

\\html <div class="intro" class="group"> <div class="col-left"> <h1 class="heading">About Me</h1> <img src="img/intro-icon.png" alt="intro icon" id="icon1"> </div> <div class="col-right"> <p id="me">I am trying to learn how to code.This is my test site. We'll see how it turns out. Hopefully steady progess is made and it does not end with me throwing my hands up in frustration.</p> </div> </div> \\