Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations The Box Model Floats

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

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

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

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

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.

Can you post your code?

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;
}