How do I make one div appear above another?

How do I make one div appear above another?

This is my code so far:

<div id="main">
  <div id="header">
    <div id="pic"></div>
    <div id="nav"></div>
  </div>
</div>

Code (markup):

For CSS the header div is relative and the nav div is absolute. I positioned the nav div where I wanted it to go, but for some reason it is always below the header div. I tried using z-index:2; but it isn't working.

Also...

Is there any way I can make the text in a div tag be aligned to the bottom instead of the top?

Thanks!

~imozeb

 

This should work
<div id="main">
<div id="header">
<div id="nav"></div>
<div id="pic"></div>
</div>
</div>

For making text to bottom use vertical-align: bottom; but its not cross browser solution and you must use JavaScript or padding to container.

 

since header is #nav's parent, what you describe should be impossible. The only one it could appear under would be #pic, not #header.

Though without the CSS you are using and/or a test page, anything we say is a wild guess - the classic "and this is why we can't help you"

Wild guess from just the markup? You've got a #header div that probably isn't even necessary in the markup, a #pic div that should probably be a h1, and a #nav div that should probably be directly applied to a UL without a div around it... and that's assuming #main is your equivalent to what I call #pageWrapper - used to apply any width constraints.

<div id="pageWrapper">

	<h1>
		Site Title
		<span><!-- image sandbag --></span>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="#">Some itmes</a></li>
	</ul>
	
</div>

Code (markup):

Though again, that's a wild guess... Much as CSS without the HTML is gibberish, so too is HTML without CSS when using separation of presentation from content.

You know, you're like the fifth or sixth person I've seen over the past week using that wasteful div-happy structure... Who's been spreading this nonsense and where do I go to slap them silly?

 

you can set position absolute and set top and left/right
also, you can switch places...