menu div sending main div far away

Question

Sorry for the weird title, I don't know what else to call it. So here is my question. I am making a new site from scratch, and I'm am not very fluent in HTML, but I made a main div, and a top menu div, and when I tested it, it was fine. Then I added a side bar to it, and when I tested it, the menu was all the way on the left, so when I tried to fix it, the main div was sent out to the middle of the page along with the menu, away from the sidebar. Here is my css code:

body
{
  font: "Trebuchet MS", Verdana, sans-serif;
  background-image:url("http://www.wallchan.com/images/mediums/2000.jpg");
  color: #696969;
}

#main
{
  position: absolute;
  left:105px;
  padding: 30px;
  background-color:     #ADFF2F;
  border-radius: 4px 4px 4px 4px;
}

h1
{
  font: Georgia, serif;
  border-bottom: 3px solid #cc9900;
  color: #996600;
}

#sidebar
{
  position:absolute;
  left:0; top:92px; bottom: 0;
  width: 90px;
  padding: 10px;
  background-color:  #48D1CC;
  border-radius: 10px 10px 10px 10px;
}

#menu
{
  padding: 0px;
  position: relative;
  margin: 0;
}

#menu li
{
  display: inline;
}

#menu li a
{
  background-color:     #87CEFA;
  padding: 10px 20px;
  text-decoration: none;
  line-height: 2.8em;
  color: #034af3;
  border-radius: 4px 4px 0 0;
}

#menu li a:hover
{
  background-color:     #7CFC00;
}

Here is my main HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>PHP Demo</title>
    <link href="site.css" rel="stylesheet">
  </head>
  <body>
    <div id="sidebar">
      <p>Test</p>
    </div>
    <div id="menu">
      <?php include("header.php"); ?>
      <div id="main">
        <h1>Welcome to the Pantheon Inc. website! </h1>
        <h2>We strive to make your life easier!</h2>
        <?php include("footer.php"); ?>
      </div>
  </body>
</html>

and here is my header code:

<ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="projects.php">Projects</a></li>
<li><a href="about.php">About</a></li>
</ul>

P.S. Also, I would like to know if there is any way to turn my menu into a drop down menu? like when you hover over it, there might be a little jquery animation making it drop down its sub-components. Thanks!

score 1 · Answer 1 · answered Apr 03 '14 at 21:26

You shouldn't be using position: absolute in this case.
Floats would be better - flexbox (if the browsers you are targeting support it) would be best.

HTML

<ul id="menu">
    <li><a href="index.php">Home</a></li>
    <li><a href="projects.php">Projects</a></li>
    <li><a href="about.php">About</a></li>
</ul>

<div id="sidebar">
    <p>Test</p>
</div>

<div id="main">
    <h1>Welcome to the Pantheon Inc. website! </h1>
    <h2>We strive to make your life easier!</h2>
</div>

<footer>footer here</footer>

CSS

#menu
{
  padding: 0px;
  overflow: hidden;
  margin: 0;
}

#menu li
{
  display: block;
  float: left;
  margin-right: 5px;
}

#main
{
  float: left;
  padding: 30px;
  background-color:     #ADFF2F;
  border-radius: 4px 4px 4px 4px;
  margin-left: 5px;
}

#sidebar
{
  float: left;
  width: 90px;
  padding: 10px;
  background-color:  #48D1CC;
  border-radius: 10px 10px 10px 10px;
}

footer { clear: both; }

Other issues:

there is no a <div id="menu"> closing tag, you need to add it
you have 2 identical IDs, menu. You need to get rid of one.

Fiddle with floated layout

score 0 · Answer 2 · edited May 23 '17 at 12:05

To be honest I haven't read your entire post, but this seems like a position problem. when you add position absolute on one element, it will lose the normal flow on the page, to recover this flow you can add on your main container.

overflow:hidden;

also you can add

<div style="clear:both"></div>

you will get the same result

What is the meaning of the terms "Normal Flow" and "Out of Flow", in terms of HTML, CSS and Browser?

http://www.w3schools.com/cssref/pr_class_clear.asp

menu div sending main div far away

2 Answers2

HTML

CSS