Question

I’ve got the following html:

<div id="container">
    <div id="pageHeader">
      <h1><span>Page Title</span></h1>
    </div>

    <div id="navigation_menu">
      <ul>
        <li id="treeslink"><a href="#">Trees</a></li>
        <li id="gardenslink"><a href="#">Gardens</a></li>
        <li id="portlink"><a href="#">Portfolio</a></li>
      </ul>
    </div> 
  </div>

I want to put navigation_menu directly beneath the pageHeader.

So I have this in my .css:

#container {width:870px; margin:0 auto;position:relative;}

#pageHeader h1 
{
  position:absolute;
  width:870px;  
  margin-top:0;
  font:74px "F25_TypewriterCondensed";
  letter-spacing:-2px;
}

#navigation_menu
{
  position:absolute;
  width: 169px;
}

But the navigation_menu just appears over pageHeader, at the top left corner of container. Is it possible to get it just underneath?

Answer 1

I don’t see why you use the absolute positioning. What you are after is actualy default behaviour. I updated your css to this:

#container 
{
   width:870px; 
   margin:0 auto;
}

#pageHeader h1 
{

  margin-top:0;
  font:74px "F25_TypewriterCondensed";
  letter-spacing:-2px;
}

#navigation_menu
{
  width: 169px;
}​

check the fiddle to see the code in action: http://jsfiddle.net/ebgVq/