Overlapping and bottom-justification...

[ShootingBlanks]

I have two questions about the same site I'm designing, so I'm just going to combine them into one thread.  The site in question is here, temporarily, for you to see what I'm talking about:

 

http://www.shootingblanks.net/TEMP/Nevermind/index.php

 

GENERAL INFO:

The site is set up with three divs ("#containerTop", "#containerMiddle", "#containerBottom").  Within each of those divs are two more divs for the left and right sides (TOP - "#headerLeft", "#headerRight", MIDDLE - "#leftSide", ".mainContent", BOTTOM - "#footerLeft", "#footerRight").  The left-sides are set at a width of 233px with no padding/margin and the right sides are set at a 557px with no padding/margin.  The "#containerTop" has a set height of 214px, which is the exact height of the background image (the "watery" logo on the top-right).

 

QUESTION #1:

As you can see, there is some site navigation in the "#headerRight" div within the "#containerTop" div.  I got the navigation to appear at the very bottom of the "#headerRight" div just by messing with different "padding-top" on each of the images/rollovers for the navigation.  That works, I guess (it's weird cuz you can activate the links by hovering WAY above them to the top of the div), but I was wondering if there was a way to justify text/images/etc on the bottom of a div (or, similarly, the center of a div) without using padding?  Like, a "vertical justification" or something?

 

QUESTION #2:

If you're viewing this in Firefox, you already see the problem.  But it doesn't happen in IE7 (I can't test in IE6 cuz "Multiple IEs" doesn't work on my laptop for some reason, so if anyone can check this for me in IE6 and let me know, that would be great).  Anyway, in Firefox, the "#containerBottom" div doesn't fall below the "#containerMiddle" div like it should.  Instead, it just kind of overlaps it.  Again, it looks fine in IE7.  Within each "#containerXXX" div I have the code "overflow:hidden".  I'm not totally sure what it does, but in past projects it's seemed to help, but not in this one.  Any suggestions on how to fix this???

 

Thanks so much!  Sorry for the long post, but I wanted to be as detailed as possible!!!

 

[ShootingBlanks]

EDIT!!!:

Please ignore my second question, as a "clear:both" seemed to fix it.  First question still stands, though!

 

Thanks!!!

 

[SuperBlue]

Use position:relative;bottom:0; on the text/links.

[ShootingBlanks]

Use position:relative;bottom:0; on the text/links.

 

That did not work.  It just bumped all the navigation links to the top of the div.

 

Any other ideas?

 

Thanks!

 

 

[SuperBlue]

You need to define a height on #containerTop for it to work, i asume 214 should be 214px.

 

And try defining your width/height, and applying the position: relative;bottom: 0; on the a elements instead.

 

 

if that dosent work, try defining position: relative; on the #headerRight, and position: absolute;bottom: 0; on the a elements.

[ShootingBlanks]

try defining position: relative; on the #headerRight, and position: absolute;bottom: 0; on the a elements.

That's the closest thing that's worked so far.  But it just took all the nav images and scrunched them together in the bottom middle of the "#headerRight" div.  I updated the original link for you to see what it looks like...

 

Any other ideas?  Thanks!