Align image to the right

Question

So I am very new to the whole coding thing and for this site I am building for class I want to align this photo I have at the bottom and move it to the right hand side of the page.

<img src ="halogram%20VR.jpg" alt = "man in halogram type VR setting" width:"200" height= "200">

This is the code for the image and I tried to add put something like align=center, but that has presented no results. What is the proper code for moving my image to the right hand side of the page?

Answer 1

You can do this in your HTML with <img src="image.jpg" alt="image" style="float: right"> or in a seperate .css file with img {float: right;}

Answer 2

While you can use float:right that will mean you need to clear that float for anything after that element. You can use text-align on the parent element for a simpler option:

div {
  text-align: right;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>

An example of float messing up your layout without clearing it (note that this looks fine on Stackoverflow's small width, clicking full page will show the actual result).

img {
  float: right;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
  <h1>HELLO WORLD</h1>
</div>
<h1>HELLO WORLD</h1>

An example using flexbox

div {
  display: flex;
  justify-content: flex-end;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>

An example using float and clearing:

.clear::after {
  display: block;
  content: "";
  clear: both;
} 

.float {
  float: right;
}

<div class="clear">
  <div class="float">
    <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
  </div>
</div>
<p>HELLO WORLD</p>