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 Basics Page Layout with the Float Property The Float Challenge Solution

Posted by Maceo Lewis
Maceo Lewis
14,200 Points

I'm not understanding how .col works?

I had issues with this in a previous challenge, and I'm thinking I might have missed something. I'm not understanding how .col works as opposed to .primary col or .secondary col? If the div class is "primary col" shouldn't that be the same in CSS?

2 Answers

Andreas Nyström
Andreas Nyström
8,887 Points
Andreas Nyström
Andreas Nyström
8,887 Points

Hi. Let me try to explain..

If you look inside your css-file. This is what you get:

    .col {
        float: right;
        padding-left: 1em;
        padding-right: 1em;
    }

    .primary {
        width: 60%;
    }

    .secondary {
        width: 40%;
    }

.col, .primary and .secondary are all classes that you can add to your html-elements. Elements in your html can share classes. You can in fact see it in your html code here: 

            <div class="secondary col">
                <h2>Welcome!</h2>
                <p>Everything in this city is worth waiting in line for.</p>
                <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
                <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
            </div><!--/.secondary-->

            <div class="primary col">
                <h2>Great food</h2>
                <img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
                <p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
                <p>Marzipan toffee drag&#233;e chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
                <p> Fruitcake jelly-o croissant souffl&#233; . Biscuit jujubes drag&#233;e. Sesame snaps tootsie roll chocolate bar cake tart macaroon pudding. Ice cream gummies jujubes cupcake. Cake marshmallow cookie lollipop tart. Tootsie roll bear claw marzipan jujubes wafer tart chocolate bar cake biscuit. Jelly beans danish pastry apple pie fruitcake. Jelly-o icing candy canes lollipop tiramisu</p>
            </div><!--/.primary-->

Now... they share the col class, but has an extra class called "primary" and "secondary". Your html-elements can have as many classes as you'd like and you separate them by a space. For example: 

// This div has the class of secondary, col, anotherClass and oneMoreClass.
<div class="secondary col anotherClass oneMoreClass"> </div>
```html

Is it clearer? If not, ask again and I'll try explain better! Keep at it and happy coding!
Maceo Lewis
Maceo Lewis
14,200 Points

Thanks Andreas, I somehow missed that whole part about html elements having multiple classes. That threw everything off for me. I was under the impression that "secondary col" or "primary col" would be designated as an entire class. Didn't at all occur to me that they're separated and made into separate classes by a space.

Andreas Nyström
Andreas Nyström
8,887 Points
Andreas Nyström
Andreas Nyström
8,887 Points

Maceo Lewis well now you know! And don't worry if it seems a little complicated now, you will have a lot of practice with many classes on your html-elements in the future. Especially when you're taking the bootstrap course. Keep at it and happy coding! :)

Vaiva Ignataviciute
Vaiva Ignataviciute
3,652 Points
Vaiva Ignataviciute
Vaiva Ignataviciute
3,652 Points

yeees I was in the same situation. Did not understood what is the difference between col and primary and secondary classes. This is interesting. Thank you