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

Robbie Singh
Robbie Singh
3,675 Points
Posted by Robbie Singh
Robbie Singh
3,675 Points

How do I float my columns to the left? (challenge q)

I don't know what Im doing wrong. It's probably something small.

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 group">
            <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 col">
      <h3>heading</h3>
      <p>paragraph</p>
    </div>


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

/* Float Styles
================================ */

.main-logo, .main-nav li {
  float: left;
}

.primary col, .secondary col, .extra col {
  float: left;
}

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

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

2 Answers

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

You're looking at the class names as one class.

See in the HTML where it says 

<div class="primary col">

?

That's not one class name. That's two class names separated by a space. Remember, an element can have many class names however class names cannot have a space in them. So, if you see a class="" attribute and there are spaces present, that means it's more than one class.

So your css is going "what am I supposed to do with this??" because it doesn't recognize the col part of the whole thing.

So now knowing that the class attributes aren't holding just one class, look at your html again. See anything similar between all of those divs and their classes?

Now what should your CSS look like?

Cheers,

Huck - :sunglasses:

edit: sigh always trying to get in before someone just gives it away... always failing lol.

Robbie Singh
Robbie Singh
3,675 Points
Robbie Singh
Robbie Singh
3,675 Points

You should be a teacher! Wait, maybe you are one.

Thanks for making me think. Too bad I read the first answer before reading yours haha. However, I still gave you the best answer because of a simple philosophy:

give a man a fish and feed him for a day. teach a man to fish and feed him for a lifetime.

I appreciate your help!

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

huckleberry, my bad! You're right I really should not have given it away so easy. I didn't have time to type up a full explanation.

P.S. I am recommending you to be a mod because you are pretty awesome at answering questions.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You only need:

.col {
    float: left;
}