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 Joshua szkodlarski
Joshua szkodlarski
8,604 Points

I don't know what to do

he didn't really tell us what to do for this. "Create a new CSS rule that floats the image with the class badge-icon left"

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="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>
    <br />
    </div>
</body>
style.css 
p {

}




/* clearfix styles */

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

5 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Joshua,

Try this:

/* Complete the challenge by writing CSS below */

img.badge-icon {
  float: left;
}

This part targets the img with a class of badge-icon:

img.badge-icon {

You then use the following to float the element to the left side:

float: left;

Technically you could also target it with the following and it would pass but this wouldn't apply to img tags only:

/* Complete the challenge by writing CSS below */

.badge-icon {
  float: left;
}

You can find additional info on floats over at CSS Tricks too.

Hope that helps :)

-Rich

Nathan Smutz
Nathan Smutz
9,492 Points
Nathan Smutz
Nathan Smutz
9,492 Points

For creating a new rule, look at the html to see how that badge icon is identified. There's an image tag:

<img class="badge-icon" src="flag.png">

I'd get started by using that class to target the badge with your css rule. Since it's a class, you put a dot before the name:

.badge-icon {
    /* Stuff to make your image float left... */
}
Preston Skaggs
Preston Skaggs
11,818 Points
Preston Skaggs
Preston Skaggs
11,818 Points

Its asking to put a rule in your CSS file for the class="badge-icon" and declare it's float value as left.

.selector { float: left; }

John Magee
PLUS
John Magee
Courses Plus Student 9,058 Points
John Magee
John Magee
Courses Plus Student 9,058 Points

.badge-icon { float: left; }