Home/ Questions/Q 8657581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:33:22+00:00

Consider this being slipped into some HTML file right after a <body> tag and

  • 0

Consider this being slipped into some HTML file right after a <body> tag and before some text:

<div style="width:100%; height=320pix; background-color:black">
<img src="logo.jpg">
</div>

For me, this creates a black “banner” at the top of the browser page, with the logo image (320pix high) aligned to the left. How can I move it to the right and leave the text exactly as is? I would like to know the simplest addition to this code to achieve that. When I specify style="float:right" in the <img ...> tag line, the text that follows wraps around it, destroying the banner effect.

However… if I transfer the same elements into a <style>...</style> block within the HTML, and include an img{float:right;} everything works fine. I just do not understand why the floating behaviour should be different between the two approaches. My head is about to explode…

A possible lead – This question indicates that it should be simple, but when I try precisely the code given, it still does not work. Could it be a !DOCTYPE or similar issue? I am using Firefox 15.0.1 as my browser.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give the DIV containing the image a relative position. This will allow you to position the image absolutely within it.

    <div style="position:relative; width:100%; height:320px; background-color:black">

    <img src="logo.jpg" style="position:absolute; right:0px;">

</div>

    Adjust the ‘right’ to position the image to your liking.

    • 0