How can I get one div under another?

liunx

Guest
I have a div with my content in it, and a div with my navigation. Navigation div is supposed to be overlapping the main div a little bit. All was well before, when I had the navigation div after my main div, unfortunately, how I had the navigation positioned, when the page became too long the navigation would be halfway down the page, and in my opinion its not good to have to scroll down to get to the navigation.

I've given the navigation z-index 1 and the main div z-index -1 but it doesn't seem to be doing anything, unless I'm using it incorrectly.

Anyway, in summary:

Putting the navigation div after the main div and positioning it from there doesn't work well, unless you can suggest a better way to position it. (I'd try absolute positioning, which I was trying in the beginning, but I have difficulty making IE and FF display things the same that way.)
z-index doesn't seem to be helping, unless I'm doing it wrong
The page where I'm testing this is at <!-- m --><a class="postlink" href="http://www.stellmond.com/test/rules.php">http://www.stellmond.com/test/rules.php</a><!-- m -->


Any suggestions you could offer are appreciated, but I'd prefer that, if you decide to post the corrected styles, you also offer an explination of why your code works as opposed to mine. In the past others haven't done this, and I like having my page look as I like, but I don't like not knowing why it has ended up that way.instead of z-index 1 try 2 and instead of -1 try 1. Not sure if z-index supports negative, but its worth trying :)Hi -
I'm not absolutely sure of this one, but I think you'd need to go back to doing positioning in order to get the effect that you want.

Try using a 'container' div to house the leftnav and maincontent. Give it a position:relative; - but don't add any values - helps IE.

Place your maincontent div first, then do the nav div - for it, try doing position:absolute; and add the distance from the top: and left: that you need it to be.

Again, just giving it a shot!
Good luck,
El

[BTW, we can't respond very well in terms of code comparisons when the CSS isn't included in your post...]The style sheet is external, <!-- m --><a class="postlink" href="http://www.stellmond.com/styles.css">http://www.stellmond.com/styles.css</a><!-- m -->

Thanks you two, I'll go try your suggestions when I have time and I'll let you know how things go :)I ended up going with absolute positioning and everything looks good now :)
 
Back
Top