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

Sahan Balasuriya
Sahan Balasuriya
10,115 Points
Posted by Sahan Balasuriya
Sahan Balasuriya
10,115 Points

Problem with float

https://www.dropbox.com/s/stbu8widhv4oe2z/Screenshot%202014-08-17%2023.23.56.png

In the code challenge task it says my code is correct and I can continue but the preview isn't right as you can see in the screenshot.

5 Answers

Kristen Law
Kristen Law
16,244 Points

The reason the preview looks a little off is because you specified the margin as 20px, which will give it a 20px margin on all four sides of the image with the badge-icon class. The Code Challenge asked for a margin of 20px on the right side of the image, so it should be margin-right: 20px. This should make the preview turn out correctly, as shown here.

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Did you select the item with the class "badge-icon" and then float to the left? Also, sometimes you need to get to the next task in the challenge for the results in the code challenge to render in the HTML view. Does that help?

/* Complete the challenge by writing CSS below */
.badge-icon {
  float: left;
}

Smile more, Laura

Sahan Balasuriya
Sahan Balasuriya
10,115 Points
Sahan Balasuriya
Sahan Balasuriya
10,115 Points

That's what I did and the screen shot was taken after completing the last step I'm gonna try and copy the html and css to another text editor and open it Google Chrome or something.

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Sounds like a good plan-as long as your code is right it should work, but it seems sometimes the Code Challenges can be a bit buggy.

Kristen Law
Kristen Law
16,244 Points

Can you post your code?

Sahan Balasuriya
Sahan Balasuriya
10,115 Points
Sahan Balasuriya
Sahan Balasuriya
10,115 Points

https://www.dropbox.com/s/okf73stxwiteaae/Screenshot%202014-08-17%2023.42.02.png

so i copied the html and css , it works fine but its doesn't look the same because the style sheet called page.css isn't there for me to copy from so I guess it was a bug.I copied the html exactly the way it was in the code challenge after I completed it so you can see the style sheet page.css attached. 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="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>

the css:

/* Complete the challenge by writing CSS below */
.badge-icon {
  float:left;
  margin:20px;
}

.badge-desc {
  float:left;
  width:70%;
}


/* clearfix styles */

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