How to position a picture within an element? | SoloLearn: Learn to code for FREE!

0

How to position a picture within an 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 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!

8/12/2018 9:49:08 PM

Mathew McRae

12 Answers

New Answer

+4

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

+3

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.

+2

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

+1

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; }

+1

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

+1

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

0

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.

0

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).

0

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. :-)

0

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.

0

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;

0

I tried that, but then you can't see the 'Contact Me' text at the top(?) On edit: Now it's having no effect.