I've run into an issue where my container is not wrapping a border around the other elements, only around the header. I checked with validators for both CSS and HTML but there are no errors being shown. Does anyone have an idea what might be causing this problem?
HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Site Title in Browser</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="container"> <!-- Container Start -->
<div id="header">
<div class="site-title">Site Title</div>
<div class="site-description">a description of the site</div>
</div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div id="content"> <!-- Content Start -->
<h2>Title</h2>
Sample text
</div> <!-- Content End -->
<!-- Sidebar Start -->
<div id="sidebar">Sidebar</div> <!-- Sidebar End -->
<div id="footer">Copyright © [sitename]</div>
</div> <!-- Container End -->
</body>
</html>
Here's the CSS:
body {
background:#990000;
margin:0;
padding:0;
}
#container {
width:960px;
background:#fff;
padding:10px;
margin:10px auto 10px auto;
border-width:5px;
border-style:double;
border-color: #000000;
}
/* Header Start */
#header {
background:url(images/header.jpg) top left repeat-x #fff;
width:960px;
height:150px;
margin:0;
padding:0;
}
.site-title {
color:#fff;
margin:0;
padding:10px;
font-weight:normal;
font-size:24pt;
}
.site-description {
text-align:right;
padding:50px 10px 10px 10px;
color:#fff;
font-size:12pt;
font-weight:bold;
}
/* Menu Start */
#menu {
margin:10px 0 0 0;
padding:0 10px 0 10px;
height:37px;
width:940px;
border:1px #000000;
}
#menu li {
list-style:none;
margin:0;
padding:0;
display:inline;
}
#menu li a {
font-weight:bold;
font-size:12pt;
text-decoration:none;
padding:0 10px 4px 10px;
display:block;
margin:0;
line-height:33px;
float:left;
}
#menu li a:hover {
color:#000000;
}
/* Main Content Start */
#content {
margin-top:10px;
width: 500px;
overflow : auto;
float: left;
background: #ffffff;
border: 1px;
}
/* Sidebar Start */
#sidebar {
margin-top: 10px;
width:400px;
height:auto;
float:right;
font-weight:bold;
text-align:center;
padding:5px;
background: #ffffff;
border:10px solid #fff;
}
/* Footer Start */
#footer {
clear:both;
width: 950px;
margin-top: 10px;
float: left;
height: 40px;
border-top:1px solid #000000;
color:#000000;
text-align:center;
font-size:12px;
}
/* Format Start */
a {
color:#990000;
}