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 CSS Layout Techniques Float

Posted by Josh Burczyk
Josh Burczyk
4,440 Points

Cannot proceed

why won't it accept this code? I've tried it numerous ways, but this is identical to the examples given?

style.css 
/* Complete the challenge by writing CSS below */
.img {
  float: right; 
}
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Developer Diane's blog</title>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    Developer Diane’s Blog
  </header>
  <article>
    <section class="intro">
      <img src="developer-diane.jpg" alt="Developer Diane coding on her laptop.">
      <h1>The verdict is in. CSS Layout is great!</h1>
      <p class="clear">I’ve been working with CSS for a while now, and I have to say, it’s pretty awesome. I love being able to separate content from presentation, and to keep all my styles in an external stylesheet.</p>
      <p>I’ve had a pretty good grasp on the basics for a while now, but I needed to learn more about how to control layout with my CSS. Understanding CSS layout meant first exploring the parts of the CSS box model.</p>
    </section>
    <footer>©2020 Developer Diane.</footer>
</body>
</html>

2 Answers

Bramyn Payne
seal-mask
.a{fill-rule:evenodd;}techdegree
Bramyn Payne
Full Stack JavaScript Techdegree Student 19,560 Points
Bramyn Payne
.a{fill-rule:evenodd;}techdegree
Bramyn Payne
Full Stack JavaScript Techdegree Student 19,560 Points

The challenge asks you to have the text wrap around the right side, so the image needs to be on the left! So just switch out right for left and you should be good!

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Josh Burczyk ! Bramyn Payne is spot on here. Since the text is to be on the right, the image must then be on the left side so you need to float left.

However, you are selecting an element with the class "img", which doesn't exist. Instead, you should be selecting the <img>. Remember when using CSS to select, an element has nothing preceding the name of the tag, a class uses a dot/full stop/period, and an id uses a #.

img {
   /* Selects an image element */
}

.img {
   /* Selects anything with class="img" */
}

#img {
   /* Selects anything with id="img" */
}

Hope this helps! :sparkles: