Move image to the right side

1

Hi guys. I want to move my image to the right side and have not been able to. Thanks for your help!

2

Use the properties

position: absolute;
right: 0%;
3

Well, there are a few different solutions. You should probably try to research a bit what the difference is between them and how each one behaves since you might want a different behavior on different pages.

As JScars mentioned you can use an absolute position, but that won’t look very nice when you start resizing your screen, items with absolute positions tend to overlap other elements.

You could tell your element to make sure it keeps a margin-right of 0 and a margin-left of auto. Note that image elements also need to have the display set to block in order for this to work.

add something like this to the .smaller-image class.

    margin-right:0;
    margin-left: auto;
    display:block;

An even better solution would probably be using floats or flexboxes, but those might be too complex for a basic page. Try googling some of these terms and read a bit on stack overflow or w3schools as it will help you understand the differences.

3 Likes
4

You misspelled your CSS property/value.

  float:rigt;  // should be "right"

I also suggest making your width and height equal in values so image stays proportional no matter what the browser width it… also use pixels instead of %.

width: 200px;
height: 200px;

and add some spacing around image

margin: 10px;
5

Defining both the width and height isn’t always a good idea as it can cause the image to skew. I’d be inclined to set the width and let the height scale to preserve the aspect ratio, and define a max-width property to ensure it always fits the device’s screen:

display: block; //otherwise the image will default to inline-block
width: 200px;
max-width: 100%;
1 Like
6

Thank you for your help guys!

7

Thanks JScars! I wil give it a try,