I am having trouble with positioning my sidebar to the right side of my content while keeping it within the same 'box'. Here's what I'm facing:
In the image, you can see that the sidebar is on the right side, but it's not contained in the 'content' box as I would like it to be positioned almost directly below my menu. Can someone please assist me? Below is a snippet of my code (please ignore the Danish comments, they are just notes):
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*This formats the menu */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
top right bottom left
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}<!doctype html>
<head>
<!-- Title -->
<title>IT-help for the elderly</title>
<meta charset="utf-8">
<link href="CSS sheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- This div contains your content, i.e., your main text -->
<div id="content">
<!-- Header. Contains banner -->
<div id="header">
</div>
<!-- Menu -->
<ul>
<li><a href="home.html">Home</a>
</li>
<li><a href="prices.html">Prices</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
<!-- Your main text goes here -->
<div id="tekst">
<h1>Heading 1</h1>
<p>Here you can write about what you offer, why, how, to whom, and other information.</p>
<h2>Subheading 1</h2>
<p>Here you can maybe write a bit about yourself and your qualifications?</p>
<div id="sidebar">
<h3>Leon Laksø</h3>
<p>So-and-so-many years in service, certified blah blah, all sorts of other stuff. Maybe include a picture where you look friendly?</p>
<p>Maybe a mail link could go here?</p>
</div>
</div>
</div>
</body>
</html>