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 of) 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 to the form. 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) and is similar to websites like the BBC, etc. Here is the code copy-and-pasted from trinket (link below).
https://trinket.io/html/b369625bd5
Thanks very much, I would really appreciate any help with this.
#Container {
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
}
header {
color: blue;
font-size: 30pt;
text-shadow: 16px 8px 16px grey;
}
#MainBody {
margin-top: 15px;
margin-bottom: 15px;
}
form {
}
img {
display: block;
height: auto;
width: 20%;
float: right;
}
.Sidebar {
background-color: #f2f2f2;
}
nav {
text-align: center;
background-color: #f2f2f2;
padding: 10px;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}
a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
text-decoration-color: #000;
}
a:active {
text-decoration: underline;
}
#button1, #button2, #button3, #button4, #button5 {
background-color: #4CAF50;
box-shadow: 1px 2px #888888;
}
#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover {
background-color: white;
}
#button1a, #button2a, #button3a, #button4a {
background-color: #4BC402;
box-shadow: 1px 2px #888888;
}
#button1a:hover, #button2a:hover, #button3a:hover, #button4a:hover {
background-color: white;
}
footer {
text-align: center;
margin-top: 5px;
}<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>The World's Strangest Facts</title>
</head>
<body>
<!-- Container Starts Here -->
<div id="Container">
<!-- Header Section Starts Here -->
<header>
<div id="HeaderOne">
<h1 style="text-align: center">StrangeNET</h1>
</div>
<div id="HeaderTwo">
<h3 style="text-align: center">The World's Strangest Facts</h3>
</div>
</header>
<!-- Header Section Ends Here -->
<hr />
<!-- Nav Menu Starts Here -->
<nav>
<ul>
<button id="button1a"><li><a href="#">Home</a></li></button>
<button id="button2a"><li><a href="#">About</a></li></button>
<button id="button3a"><li><a href="#">Contact</a></li></button>
<button id="button4a"><li><a href="#">Disclaimer</a></li></button>
</ul>
<ul>
<button id="button1"><li><a href="#">Sociopolitical</a></li></button>
<button id="button2"><li><a href="#">History</a></li></button>
<button id="button3"><li><a href="#">Earth & Nature</a></li></button>
<button id="button4"><li><a href="#">The Cosmos</a></li></button>
<button id="button5"><li><a href="#">Technology</a></li></button>
</ul>
</nav>
<!-- Nav Menu Ends Here -->
<hr />
<!-- Main Content Starts Here -->
<div id="MainBody">
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
<p>
Lorem ipsum dolor sit amet, et legendos argumentum complectitur eam. Ipsum dicat ea mea.
No augue quaerendum disputationi sed, nostrum ponderum id mei, no eos quaestio voluptaria adipiscing.
Putant singulis an cum, cum lorem possim habemus in. Vix quaestio sapientem cotidieque at, an nec habeo evertitur, no soluta indoctum pri.
</p>
</div>
<!-- Main Content Ends Here -->
<hr />
<!-- 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="contactme.jpg" alt="Postik Note">
<!-- Relative image address changed for Trinket only -->
</div>
</aside>
<!-- Contact Form Ends Here -->
<hr />
<!-- Footer Starts Here -->
<footer>
<span>Mathew | 2018 ©</span>
</footer>
<!-- Footer Ends Here -->
</div>
<!-- Container Ends Here -->
</body>
</html>
