CODEWITHSUNDEEP
css
BeeBand
BeeBand

Reputation: 11503

How do I position a div directly below it's sibling ( without using fixed coordinates )?

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?

Upvotes: 1

Views: 3010

Answers (3)

j08691
j08691

Reputation: 207913

If you set a height on #pageHeader h1 and then set a margin-top on #navigation_menu using the same amount (e.g. 100px each) this should accomplish what you want. Since you're positioning absolutely you take the elements out of the flow of the document. By giving the header a height, you can then position the menu below it explicitly by bumping it down by the same amount. It's really a visual effect only since both elements are out of the flow.

Upvotes: 1

Sandy Gifford
Sandy Gifford

Reputation: 8136

You have a few problems, first, get rid of absolute positioning on navigation_menu, it will make it ignore the "pushiness" of the other divs above it.

Second, we have to make pageHeader get pushed. When you make an element positioned absolutely it loses it's ability to make other objects flow around it, including parent elements which want to re-size to their content. Having an absolutely positioned h1 inside of that div makes the div size to 1px x 1px.

Upvotes: 2

Pevara
Pevara

Reputation: 14310

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/

Upvotes: 2

Related Questions