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&开发者_Python百科gt; 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 {

}

Check the Holy Grail article from A List Apart. The article shows the best way to create a 3 column layout.

Don't go the easy path and just use tables for your layout! Use the table tag only for "real tables", for everything else use divs, spans, lists, etc.

The benefit of a table-less layout is mostly that it's more accessible: An older browser, or a mobile browser, will simply ignore the CSS and display only the HTML-contents of the page. Div tags will be ignored, while a table would clutter your layout... It's true, there will be LOTS of divs! But using tables for layouting isn't necessary anymore these days!

Also, personally, I wouldn't start with a WYSIWYG tool. If you want clean HTML you will have to write it yourself. Also, with a little practice, you will write HTML faster by hand than with a tool. All the professional layouters I have worked with write HTML in plain text...

Your sidebar is floated right; the main content isn't. Try moving the sidebar above the main content in the markup. Alternatively, try specifying a float for the main content as well.

Go with a float:left for the left resting div tags with float right for the right side div, I suspect you are just missing the float parts.

not sure exactly what you're trying to get to, but I suspect something like...

replace the following css class definitions: #menu_bar, #main_content, #footer with

#footer {
 clear:both;
}

#main_content {
 margin: 0.1em 0.1em 0.1em 0.1em;
 border: 1px solid #46A5E0;
 float: left;
}

#menu_bar {
 margin: 0.1em 0.1em 0.1em 0.1em;
 border: 1px solid #46A5E0;
 width: 13em;
 float:left;
}

What was required was a div within the at the end indicated as

that would have the following property in CSS

clear {

clear: both;

}

this would solve the positioning problem, it will bring the sidebar and the main_content to the right positions and from here adjustments can be made to the sidebar and main_content in terms of width and margins