Relative beginner Qu: How to position a picture parallel to a <form> element

Hi guys,

I started learning HTML and CSS approximately two months ago. I’ve just been creating a practice website that I don’t intend to publish, at least not at the moment. I’m trying to position a picture of a yellow Postik note next to (to the right) the form element. 

It doesn’t matter what I do, I just can’t get it to appear to the right of the contact form because at the moment it’s below the form and I need to move it up so it’s parallel. I can easily position it under my contact form, but not further up, where I need it to be - basically on the right of the web page (where it is now) but parallel to the <form>.

Note that my whole website is positioned within the middle of the screen (it’s 800px wide). You can see all of my code here (you should be able to see what I mean):

https://trinket.io/html/b369625bd5

Thanks very much!

Deleted. No longer relevant after OP was edited.

Deleted. No longer relevant after OP was edited. Syntax in the link has since been changed by myself.

Hi @mathewjm,

Thanks for being part of the GitHub Commuinity Forum! It’s great that you found an answer to your original question.

In the future, if you find a resolution to something you post here, we ask that users update their threads by commenting with what they did to fix the issue and then marking their own answer as a solution. This makes information much easier to find and helps out those who might be having similar issues.

Cheers!

1 Like

Hi Nadia,

Thanks for the kind message. Since posting the message, I have settled on a different solution. Instead I have used the ‘transform’ property with the ‘translate’ value. Therefore I can position the image wherever I like. So that it doesn’t disfigure the document, I have also floated the element. This is what I did:

img {
float: right;
height: auto;
width: 25%;
transform: translate(-400px, -300px);

1 Like