'image keeps going inbetween two floats, can't clear it

ive been following this guys tutorial, ive timestamped it- and he has a text block that floats to the side. image, which is a div on its own keeps going in the middle when i make one float left and the other float right and i don't know why. enter image description here

*also if i put the image floated next to a textbox, how would i make sure they're the same height?

body {
  background-color: aquamarine;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.navbar {
  list-style: none;
  color: red;
}

.container {
  width: 60%;
  margin: auto;
}

.box-1 {
  margin-bottom: 1%;
  padding: 1%;
  background-color: darkgray;
  color: white;
}

.box-2 {
  float: left;
  padding: 1%;
  width: 30%;
  color: black;
  background: white;
  border-style: none;
}

.sidebox {
  float: right;
  background-color: aliceblue;
  width: 60%;
}

img {
  float: none;
  margin: 10%;
  display: block;
  width: 300px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>help</title>
  <link href="Untitled-1.css" rel="stylesheet" />
  <meta charset="utf-8" />
  <meta name="description" content="Web Development" />
  <meta name="keywords" content="HTML and CSS" />
  <meta name="author" content="grace" />
</head>

<body>
  <header>
    <nav class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="study.html">Study</a></li>
        <li><a href="animation.html">Animation</a></li>
      </ul>
    </nav>
  </header>
  <div class="container">
    <div class="box-1">
      <h1>Achievments</h1>
      <p>Grace has completed these 4 achievements:</p>
      <ol>
        <li>Two decades of existing</li>
        <li>3+ jobs</li>
        <li>Graduated high school</li>
        <li>Failed hopes and dreams</li>
      </ol>
    </div>
    <div class="box-2">
      <h1>Hobbies</h1>
      <ul>
        <li>Rollerskating</li>
        <li>Crying</li>
        <li>Buying many books</li>
        <li>Reading some books</li>
        <li>Drawing and ctrl z</li>
        <li>Video Games</li>
      </ul>
    </div>
    <div class="sidebox">
      <p>Lorem ipsum ebfasuigfuie eufsiefh adfhuseifhuei efhnsihfeihf </p>
      <p>fuck</p>
      <p>off</p>
      <p>image</p>
    </div>
    <div class="astro">
      <img src="https://res.cloudinary.com/dvifiaohc/image/upload/v1651048486/fly_gpbrfe.png">
    </div>
  </div>
</body>

</html>
cssimagefloating


Solution 1:[1]

Your CSS for the image elements is all wrong if you're trying to float and snap to the rightmost part of the page.

img{
    float:none;
    margin:10%;
    display:block;
    width:300px;
}

Set the margin value to something closer to 0 and set float: right, like so

img{
    float: right;
    margin:5px;
    display:block;
    width:300px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Max Strandberg

Related Questions