how to make a <div> sink at the bottom of its parent <div>?

[nick]

The structure is very simple:

<div style="WIDTH: 500px; HEIGHT: 50px; BACKGROUND-COLOR: aqua">
<div id="nav">
<a href="#">menu1</a>
</div>
</div>

I want to let the "nav" div sink at the bottom of the aqua color div. I
tried to make the "nav" div 100% height and set "vertical-align:
baseline/bottom/text-bottom;" and they doesn't work.

Also I tried to set the margin-top of "nav" div to, saying, 40:
"margin-top: 40". It works on IE but not works on mozilla. On mozilla,
looks that the parent div has been set "margin-top: 40". very bizarre.

[Brian]

nick wrote:

<div style="WIDTH: 500px; HEIGHT: 50px; BACKGROUND-COLOR: aqua">
<div id="nav">
<a href="#">menu1</a>
</div>
</div>

I want to let the "nav" div sink at the bottom of the aqua color div. I
tried to make the "nav" div 100% height and set "vertical-align:
baseline/bottom/text-bottom;" and they doesn't work.
Did you check the faq? Google the group archives? This has been
discussed on numerous occasions. I'm sure you'll find lots of help there
on your specific question, plus lots of pointers on the danger of fixing
widths of elements in pixels. And perhaps you'll learn other things
along the way.
Also I tried to set the margin-top of "nav" div to, saying, 40:
"margin-top: 40". It works on IE but not works on mozilla. On mozilla,
looks that the parent div has been set "margin-top: 40". very bizarre.

Not so bizarre, really. 40 what? Pixels? Ems? You must specify a unit.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[nick]

Brian wrote:

nick wrote:

<div style="WIDTH: 500px; HEIGHT: 50px; BACKGROUND-COLOR: aqua">
<div id="nav">
<a href="#">menu1</a>
</div>
</div>

I want to let the "nav" div sink at the bottom of the aqua color div.
I tried to make the "nav" div 100% height and set "vertical-align:
baseline/bottom/text-bottom;" and they doesn't work.

Did you check the faq? Google the group archives? This has been
discussed on numerous occasions. I'm sure you'll find lots of help there
on your specific question, plus lots of pointers on the danger of fixing
widths of elements in pixels. And perhaps you'll learn other things
along the way.

I googled and didn't find it. Could you suggest better kwywords for me?
Thanks.
but it's common to set set width of a div which use picture as header...

Also I tried to set the margin-top of "nav" div to, saying, 40:
"margin-top: 40". It works on IE but not works on mozilla. On mozilla,
looks that the parent div has been set "margin-top: 40". very bizarre.

Not so bizarre, really. 40 what? Pixels? Ems? You must specify a unit.

i forgot type px here. what i tried is "margin-top: 40px"

[Markus Ernst]

"nick" <nb***@nospam.hotmail.com> schrieb im Newsbeitrag
news:c7**********@news3.bu.edu...

The structure is very simple:

<div style="WIDTH: 500px; HEIGHT: 50px; BACKGROUND-COLOR: aqua">
<div id="nav">
<a href="#">menu1</a>
</div>
</div>

I want to let the "nav" div sink at the bottom of the aqua color div. I
tried to make the "nav" div 100% height and set "vertical-align:
baseline/bottom/text-bottom;" and they doesn't work.

Also I tried to set the margin-top of "nav" div to, saying, 40:
"margin-top: 40". It works on IE but not works on mozilla. On mozilla,
looks that the parent div has been set "margin-top: 40". very bizarre.

For vertical-align check out Lauris article:
http://www.student.oulu.fi/~laurirai/www/css/middle/

HTH
Markus

[Brian]

nick wrote:

Brian wrote:

nick wrote:

<div style="WIDTH: 500px; HEIGHT: 50px; BACKGROUND-COLOR: aqua">
<div id="nav">
<a href="#">menu1</a>
</div>
</div>

I want to let the "nav" div sink at the bottom of the aqua color
div. I tried to make the "nav" div 100% height and set
"vertical-align: baseline/bottom/text-bottom;" and they doesn't
work.

Did you check the faq? Google the group archives? This has been
discussed on numerous occasions. I'm sure you'll find lots of help
there on your specific question, plus lots of pointers on the
danger of fixing widths of elements in pixels. And perhaps you'll
learn other things along the way.

I googled and didn't find it. Could you suggest better kwywords

Search for "vertical align". But search Google Groups, not the web.

http://groups.google.com/groups?grou...ng.stylesheets

http://groups.google.com/groups?&q=v...ng.stylesheets
but it's common to set set width of a div which use picture as
header...

Sure. But your example was for navigation, and included text ("menu1").

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/