Am a newbie in CSS and am writting this code and the main content and the sidebar are falling out of place. Anyone know why?
Here is the HTML and CSS used
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> WEB HELPDESK</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles/polaris.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<p class="banner"> WEB HELP DESK <p>
</div>
<div id="pathway">
</div> <!-- pathway -->
<div id="main">
<div id="menu_bar">
<div class="menu">
<ul>
<li> <a href=""> Manufacturers </a> </li>
<li> <a href=""> Add Manufacturer </a> </li>
<li> <a href=""> Edit manufacturer </a> </li>
<li> <a href=""> Delete Manufacturer </a> </li>
</ul>
<ul>
<li> <a href=""> Asset types </a> </li>
<li> <a href=""> Add Asset types </a> </li>
<li> <a href=""> Edit Asset Types </a> </li>
<li> <a href=""> Delete Asset Types </a> </li>
</ul>
<ul>
<li> <a href=""> Asset Status </a> </li>
<li> <a href=""> Add Asset Status </a> </li>
<li> <a href=""> Edit Asset Status </a> </li>
<li> <a href=""> Delete Asset Status </a> </li>
</ul>
<ul>
<li> <a href=""> Assets </a> </li>
<li> <a href=""> Add Asset </a> </li>
<li> <a href=""> Edit Asset </a> </li>
<li> <a href=""> Delete Asset </a> </li>
</ul>
</div>
</div> <!-- Menu bar -->
<div id="sidebar">
sidebar
</div> <!-- Menu bar -->
<div id="main_content">
<div id="errors">
</div> <!-- Errors -->
<div id="content">
content goes here
</div> <!-- Content -->
am floating here
</div>
</div> <!-- Main -->
<div id="footer">
</div> <!-- Footer -->
</div> <!-- Container-->
</body> <!-- Body -->
</html>
And the CSS:
body {
font-family: arial, san serif;
color: #000000;
}
#container {
margin: 0em 1.5em 1.5em 1.5em;
border: 1px solid #46A5E0;
}
#header{
margin: 0.1em 0em 0.1em 0.1em;
border: 1px solid #46A5E0;
width: 99%;
height: 5em;
}
#header .banner {
color: #333399;
text-align: centre;
font-size: 1.6em;
}
#pathway {
}
#main {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #000000;
}
#menu_bar {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #46A5E0;
width: 13em;
}
#menu_bar .menu {
font-size: 0.7em;
}
#sidebar {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #46A5E0;
float: right;
width: 13em;
}
#main_content {
margin: 0.1em 0.1em 0.1em 0.1em;
border: 1px solid #46A5E0;
float: right;
}
#errors {
}
#content {
}
#footer {
}