How to prevent <img> from overlaping text on my screen-CodePudding

When my screen goes from full screen to half screen it causes my img to to overlap my article p text.

In full screen my img is located on the right hand side of the screen, but when I use half screen mode it causes the img to sit ontop on the text located on the left hand of the screen.

<article>
      <p id="talkbubble">test</p>
    </article>


<div>
    <img align="right" style="margin-top: -150px; margin-right: 40px;" src="img.pic" alt="img--3">
  </div>

I want to be able to adjust the screen size and it not change where things are located on the screen.

thanks,

CodePudding user response：

It's not a good practice to use negative margin. You're forcing img element moving up with margin-top: -150px. Use display flex if you want items be next to each other. For example:

<div style="display: flex">
    <article>
      <p id="talkbubble">test</p>
    </article>

    <div>
       <img src="img.pic" alt="img--3">
    </div>
</div>

CodePudding user response：

Try to use flexbox with the row-direction and space-between content justification.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="container">
        <article>
            <p id="talkbubble">test</p>
        </article>

        <div>
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/HammockonBeach.jpg/500px-HammockonBeach.jpg"
                alt="img--3">
        </div>
    </div>

    <style>
        body {
            box-sizing: border-box;
            border: solid 1px red;
        }

        #container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

        }
    </style>
</body>

</html>