CSS CSS Layout CSS Layout Techniques Float

Ishmael Phiri
Ishmael Phiri
3,651 Points

what am i missing here, how can i complete this challenge ?

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>

1 Answer

Peter Vann
Peter Vann
36,049 Points

Hi Ishmael!

Since the TEXT is supposed to wrap around the image's right side, the image should float LEFT.

Like this (task 1):

/* Complete the challenge by writing CSS below */
img { // image is an element, not a class, so you don't need the dot
  float: left;
}

And for task 2, you want to clear the float (set the clear property to both, which clears the float above the p element), like this:

/* Complete the challenge by writing CSS below */
img { /*** Task 1 ***/
  float: left;
}

.clear { /*** Task 2 (clear IS a class, so you do want the dot) ***/
  clear: both;
}

I hope that helps.

Stay safe and happy coding!