How to position a picture within an element?

Question

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 within an element that contains a contact form.

It doesn't matter how much I resize the picture, float it right (which is where I want it to be), change the margins, I just can't get it to appear to the right of the contact form. I can easily position it under my contact form (before the horizontal line), but not to the top-right. I can move it right, but it just won't position further up so it's parallel to the contact form. Here's a snippet of the code - but note that my whole website is positioned within the middle of the screen (it's 800px wide). Let me know. Any help would be appreciated.

<!-- Contact Form Starts Here -->
<aside>
<div class="Sidebar">
<h3>Contact Me</h3>
<form>
<input name="name" type="text" /><br />
<input name="email" type="email" /><br />
<textarea name="message"></textarea><br />
<input type="submit" value="Send" class="submit" />
</form>
<img src="images/contactme.jpg" alt="Postik Note">
</div>
</aside>
<!-- Contact Form Ends Here -->
<hr />

.Sidebar img {
margin-top: 15px;
height: 150px;
width: 180px;
float: right;
}

.Sidebar {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

You won't see the picture, as it's not located on my web. If you want to see the whole code, you can find it here: https://trinket.io/html/a0bb0dafef

Thanks very much!

Answer 1

Form is block element.

.Sidebar img {
position: relative;
height: auto;
width: 20%;
padding: 10px;
}
form {
display: inline-block;
}

Answer 2

You can't inline two elements with relative position if one of them is block element.
The float would have worked if the image was inside the form.

Answer 3

You could change the form width.
When you know the image size which is 25%
You can set the form width 75%

When you do that you notice that it still goes to second line. Because you have a little space between your form and img. You can remove it by setting you parent element Sidebar font size to 0px

Answer 4

form {
display: inline-block;
width: 75%;
}

.Sidebar img {
position: relative;
height: auto;
width: 25%;
}

.Sidebar {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
font-size: 0px;
}

Answer 5

.Sidebar has to have font-size: 0px; It sounds stupid but it works.

Answer 6

first line add
* {
font-size: 14px;
}

Answer 7

Thanks Toni!

Can you explain how you did that? Does a block-level element mean that the form couldn't absorb the img within it?

Edited:
If I wanted to move the img to the right of the element, so it's not immediately to the right of the form, how would I do that? When I add 'float' to your instructions, it places the img to the right of the form but not high enough to be horizontally parallel.

Answer 8

Thanks Toni. I understand now.

If I wanted to move the img to the right of the element, so it's not immediately to the right of the form, how would I do that? When I add 'float' to your instructions, it places the img to the right of the form but not high enough to be horizontally parallel (it's like 110° from the form).

Answer 9

Thanks Toni. I'm going to place the img inside the form and then use vertical-align. I really appreciate your help. Feel free to monitor my progress on Trinket. :-)

Answer 10

form {
display: inline-block;
position: relative;
}

form img {
position: relative;
height: auto;
width: 25%;
padding: 10px;
vertical-align: text-top;
float: right;
}

It's not exactly doing what I intend it to do. With the code above, it has made the form element much bigger and the img is actually to the bottom of the <form> and is about 75% to the right.

Answer 11

form {
display: inline-block;
width: 75%;
}

form img {
position: relative;
height: auto;
width: 25%;
float: right;
vertical-align: middle;
}

.Sidebar {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;

Answer 12

I tried that, but then you can't see the 'Contact Me' text at the top(?)

On edit: Now it's having no effect.