1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

How do I make one div appear above another?

Discussion in 'CSS' started by Imozeb, Mar 15, 2010.

  1. #1
    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 :)
     
    Imozeb, Mar 15, 2010 IP
  2. webria

    webria Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    webria, Mar 23, 2010 IP
  3. deathshadow

    deathshadow Illustrious Member

    Messages:
    6,940
    Likes Received:
    1,071
    Best Answers:
    171
    Trophy Points:
    445
    #3
    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?
     
    Last edited: Mar 23, 2010
    deathshadow, Mar 23, 2010 IP
  4. pixelz

    pixelz Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    you can set position absolute and set top and left/right
    also, you can switch places...
     
    pixelz, Apr 10, 2010 IP