Problem with CSS

Question

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 {

}

i'm guessing here, but are you trying to a three column layout here with a header and footer div? — melaos
– melaos, Commented Dec 23, 2009 at 8:28
Even I have a same question .. and as per my answer .. its better to switch to "table" architecture .. than taking pain to use so ... many DIV tags .. — Rookie Programmer Aravind
– Rookie Programmer Aravind, Commented Dec 23, 2009 at 8:31
Other issue: you are using the wrong doctype. Switch to the XHTML Strict doctype. — ZippyV
– ZippyV, Commented Dec 23, 2009 at 8:50

Vinz · Accepted Answer · 2009-12-23 09:18:45Z

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...

David M · Accepted Answer · 2009-12-23 08:17:13Z

0

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.

answered Dec 23, 2009 at 8:17

David M

73.2k13 gold badges164 silver badges187 bronze badges

Comments

Sean · Accepted Answer · 2009-12-23 08:32:29Z

0

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.

answered Dec 23, 2009 at 8:32

Sean

191 bronze badge

Comments

Paul · Accepted Answer · 2009-12-23 09:03:53Z

0

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;
}

answered Dec 23, 2009 at 9:03

Paul

5,5762 gold badges32 silver badges38 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 23, 2009 at 9:06

Gatura

6052 gold badges8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Problem with CSS

5 Answers 5

Comments

Comments

Comments

Comments

clear {

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

clear {

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related