Is there a way to have a right fixed image not break the line on the left side?-CodePudding

Is there a way to align images to the right side of the screen without having a line break on the other side in HTML/CSS? I have tried to figure this out, but the methods I tried (absolute position, not using float) either did not do anything, or made the element go away entirely. Could someone tell me how to accomplish this?

 <body>
  <p class="title"><img src="pkd.png" class="logo"></p>
    <h1>Hello!</h1>
    <div class="wrap">
    stuff on here:
    <a href="postboard.html" class="rd"><img src="bb.png"></a>
    <a href="about.html" class="rd"><img src="ab.png"></a>
    <a href="https://forms.gle/YJp3o7qQxRt2gKbE6" class="rd"><img src="rb.png"></a>
    </div>
    <p>Welcome to PolyKD! This site is still under construction , so there's not much yet .</p>
    <p> But what there is you can find over to your right .</p>
    <p>Have a nice day! <img src="pippin.png"></p>
  </body>

Looks like: This.

I want it to look like: This.

Thanks!

CodePudding user response：

You may try to use positioning,

<body>
<p class="title">
    <img src="pkd.png" class="logo">
</p>
<h1>Hello!</h1>
<div class="wrap">
    stuff on here:
    <a href="postboard.html" class="rd"><img src="bb.png"></a>
    <a href="about.html" class="rd"><img src="ab.png"></a>
    <a href="https://forms.gle/YJp3o7qQxRt2gKbE6" class="rd"><img src="rb.png"></a>
</div>
<div style="position:relative">
    <p>Welcome to PolyKD! This site is still under construction , so there's not much yet .</p>
    <p> But what there is you can find over to your right .</p>
    <p>Have a nice day!</p>
    <img src="pippin.png" style="position:absolute; right:0;">
</div>
</body>

CodePudding user response：

Nesting divs should help:

<p class="title"><img src="pkd.png" class="logo"></p>
        <h1>Hello!</h1>
    <div>
    <div align=left width="80%" style="float:left">
        <p>Welcome to PolyKD! This site is still under construction , so there's not much yet .</p>
        <p> But what there is you can find over to your right .</p>
        <p>Have a nice day! <img src="pippin.png"></p>
    </div>
        <div align=right class="wrap" width="20%" style="float:right">
        stuff on here:<br/>
        <a href="postboard.html" class="rd"><img src="bb.png"></a><br/>
        <a href="about.html" class="rd"><img src="ab.png"></a><br/>
        <a href="https://forms.gle/YJp3o7qQxRt2gKbE6" class="rd"><img src="rb.png"></a>
        </div>
    </div>