Just starting out with CSS and encountering an issue where the main content and sidebar are not aligning correctly. Any ideas on what could be causing this?
Below is the HTML and CSS being 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> <!-- Sidebar -->
<div id="main_content">
<div id="errors">
</div> <!-- Errors -->
<div id="content">
This is where the content goes
</div> <!-- Content -->
floating here
</div>
</div> <!-- Main -->
<div id="footer">
</div> <!-- Footer -->
</div> <!-- Container-->
</body> <!-- Body -->
</html>
Here's 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 {
}