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 Foundations The Box Model Floats

Posted by stevencooper
stevencooper
5,755 Points

challenge question regarding divs with multiple classes

the challenge question is: It looks like we need to clear our floats. In the HTML file, add the class group to the div with the class badge.

here is the HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Floats</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="badge">
        <img class="badge-icon" src="flag.png">
        <h4>Build a Simple Website</h4>
        <p class="badge-desc">Smells Like Bakin' is a cupcake company in need of a website. This project will walk us through the basics of HTML and CSS from the very beginning. HTML and CSS are the structural and presentational building blocks of every website and will serve as the foundation for any web project.</p>
    </div>
</body>

I don't understand what they want me to do. I've never seen a <div class="badge"> have more than one class, and it seems to me that the question wants me to put 2 classes together in the same declaration, "badge" & "group". Can anyone explain what this question means? I also don't understand how adding the class 'group' to the div will clear the floats.

fyi, here is the CSS code: 

body {
    margin: 70px 0 0;
    background: #e1e1dd;
    color: #8A8A8A;
    font: normal 62.5%/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;
}

div {
    margin: 0 auto;
    padding: 25px 0px;
    width: 720px;
    border-radius: 5px;
    background: #FFF;
  overflow: hidden;
}

h4 {
    margin: 0 0 12px 0;
    color: #33383D;
    font-size: 1.8em;
  float: left;
}

p {
    margin: 0 25px;
    font-size: 1.5em;
  width: 500px;
  float: left;
}

img {
  float: left; /* none is default, also right & left */
  margin: 0 25px;
}

br {
  clear: left; /* 4 values; left, right, both, none. */
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  +zoom: 1;
}

2 Answers

Rob Draper
Rob Draper
Courses Plus Student 5,812 Points

Hello Steven,

To answer the code question it would look like this: 

<!DOCTYPE html>
<html>
<head>
    <title>Floats</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="badge group">
        <img class="badge-icon" src="flag.png">
        <h4>Build a Simple Website</h4>
        <p class="badge-desc">Smells Like Bakin' is a cupcake company in need of a website. This project will walk us through the basics of HTML and CSS from the very beginning. HTML and CSS are the structural and presentational building blocks of every website and will serve as the foundation for any web project.</p>
    </div>
</body>
Rob Draper
Rob Draper
Courses Plus Student 5,812 Points

By adding the group class to the div that already has a class of badge you clear the div with the "micro" clearfix hack by Nicolas Gallagher using the :before & :after pseudo elements.

Link: http://nicolasgallagher.com/micro-clearfix-hack/ - this will give you a more detailed point of view on the topic.

Gary Ford
Gary Ford
14,475 Points
Gary Ford
Gary Ford
14,475 Points

An element can have multiple classes as long as you separate them by a space. The "group" class in the css code will clear the floats as is listed in the .group:after rule which lists: "clear: both". This will clear both left and right floats (both). Hope this helps.