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 Float Layout Challenge

Posted by MUZ140298 Edson Vengesai
MUZ140298 Edson Vengesai
5,028 Points

It looks like we need a clearfix in the header. Give the main-header element the class we created for clearing floats.

help

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Floats</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-wrapper">  
        <header class="main-header">
            <h1 class="main-logo"><a href="#">My Work</a></h1>
            <ul class="main-nav">
                <li><a href="#">Design</a></li>
                <li><a href="#">Coding</a></li>
                <li><a href="#">Writing</a></li>
                <li><a href="#">Hire Me!</a></li>
            </ul>
        </header>
        <div class="primary col">
            <h1>I'm a Designer</h1>
            <p>I design beautiful user interfaces, then bring them to life with HTML, CSS, and JavaScript. I love including personal photographs of nature, people and everyday things in my designs.</p>
            <p>If you need a front-end designer for your next project, <a href="#">take a look at my work</a>, then <a href="#">get in touch</a>!</p>
        </div>
        <div class="secondary col">
            <h2>I Also Write</h2>
            <p>I like teaching others about the latest web in technology. So when I'm not designing or coding websites &amp; apps, you'll find me writing <a href="#">articles for my blog</a>.</p>
        </div>
        <div class="extra">

        </div>
    </div>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

/* Float Styles
================================ */
.main-logo, .main-nav li {
float: left;
}

.extra-col, .main-header group {
float: left;
}

/* Float Clearfix
================================ */

.group:after {
  content: " ";
  display: table;
  clear: both;
}
Leila Hardy
Leila Hardy
5,601 Points
Leila Hardy
Leila Hardy
5,601 Points

Could you specify a bit more clearly what the problem is? Maybe state the question and why you are having trouble with it.

3 Answers

Flavio Carvalho
Flavio Carvalho
26,636 Points
Flavio Carvalho
Flavio Carvalho
26,636 Points

Hi MUZ140298,

Not sure if I understood the question, but try one of this:

You need to add to your header element the class .group you created for the clearfix:

<header class="main-header group">

OR, you can add another div right after header with the class:

<div class="group"></div>

I believe for your question the first one is what's being asked. Try :)

Niclas Valentiner
Niclas Valentiner
8,947 Points
Niclas Valentiner
Niclas Valentiner
8,947 Points

You need to add the class used for clearing the floats to the element with the class "main-header".

<header class="main-header group">

<!-- The above adds the 'group' class to the element -->

/* Here's the clearfix class
/* Float Clearfix
================================ */

.group:after {
  content: " ";
  display: table;
  clear: both;
}
Kendall Chung
Kendall Chung
9,511 Points
Kendall Chung
Kendall Chung
9,511 Points

you need to change the header class to what Flavio Carvalho said and in css put

.main-header group { float:left; }