how to align a div at the bottom of another

[raven129]

Hey guys,

need some help with aligning div tags. I have created 2 div's, a header div (which has a background image in it) and a navigation div(which is inside the header div) for my menu buttons. I am having problems aligning it at the bottom half of the header div, the nav div keeps appearing at the top half.

what do i need to do to achieve what i am trying to do?

thanks

[Kravvitz]

There's more than one way to do that.

I might apply a top margin to the nav list (<ul>).

[raven129]

There's more than one way to do that.

I might apply a top margin to the nav list (<ul>).

Do you mean in the CSS file? coz i tried that and works fine in IE, but when viewed in Firefox it make the page appear halfway down the screen.

[Kravvitz]

Yes, I mean in your stylesheet. Please show us what you tried.

Don't code for IE first -- it's just too buggy.

[Centauri]

but when viewed in Firefox it make the page appear halfway down the screen.
That is because a margin spaces away from a valid edge, and the edge of an empty div( your header) is not valid, so it references the margin to the window and pushes the whole header div down.

I would set position: relative on header div,
and position: absolute; bottom: 0 on nav div.

Note that, as hinted by Kravvitz, if you use an unordered list for your navigation, you can style the ul tag and not need a nav div at all.

Cheers
Graeme

[Kravvitz]

Centauri, I expect that you are right in thinking that raven129 is describing collapsing margins.

raven129, you can find information on collapsing margins here (http://www.dynamicsitesolutions.com/css/layout-techniques/#collapsing_margins)

[raven129]

thanks guys, it's fixed.