How would I go about moving an image into a space that isn't related to a div tag or anything u-CodePudding

I'm doing some web development, and require some help regarding the placement & location of an image beside a paragraph.

this is how it looks like currently

.img-2yb {
  padding-top: 20px;
  width: 20%;
  float: left;
}

<img  src="https://via.placeholder.com/400" alt="img beside ig">

On the left of the image is whitespace.

My goal is to make the picture right beside the paragraph, not impacting the paragraph. like this

This is on a laptop view and ipad view. I got the mobile view down, which is why I really hope to find a way that doesn't affect my mobile view somehow. Also , IK that float is not good to use, which is why hopefulyl I can find some answers in flexbbox.

Thank you all for any advice :)

CodePudding user response：

Just have the image in its own spot next to the content:

.article {
display: flex;
justify-content: space-between;
}

.image-holder { 
  width: 25%;
}

.article-content {
  width: 70%;
}

.img-2yb {
  padding-top: 20px;
  width: 100%;
  height: auto;
}

<section >

<div >
  <img  src="https://via.placeholder.com/400" alt="img beside ig">
</div>

<div >
  <h1>Article Title</h1>
  <h2>Article Subtitle</h2>
  <h3>Author</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</section>