By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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/
Jul 20 '05 #2

P: n/a
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"
Jul 20 '05 #3

P: n/a
"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
Jul 20 '05 #4

P: n/a
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/
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.