How do i vertically align text inside of a div

1

okay… i think this should be an easy one! i’ve got a “navigation bar” at the top of my page, which is a large div tag, with two smaller divs inside.

"logo" div contains a logo, and "navigation" contains text navigation links. the size of the nav bar is set to 40px in hieght. the logo is 39px high. [color=red]i want the navigation text links to sit at the very bottom of the 40px high div. how do i do that?
[/color]
i’ve seen and tried various attributes (align bottom, baseline) , but they dont seem to be working the way i want - with those, for some reason the text just ends up in the middle of the div…:h:

here’s the code i’ve got so far that ISNT working right:

 div.navigation { 
border:none;
min-height: 39px;
margin-left: 10px;
line-height: 39px; 
font-size: 8pt; 
vertical-align: bottom; 
float:left;
display:inline;/* ie double margin fix*/
}




 


	 [img]http://www.kirupaforum.com/forums/logo.gif[/img]



	 

	 news 
	 projects 
	 about 
	 info 
	 contact 
	 recent 
	 links

what am i doing wrong? i’m no CSS master, thats for sure, so maybe there’s just something wrong in my code i dont see!

thanks for any help!

2

hmm… even though i wrapped the code in the html wysiwyg braces… the post doesnt seem to want to display my code… so, i’ll repost it… never mind all the spaces in the tags, i just want you guys to be able to see what i’m talking about:

 div.navigation { 
border:none;
min-height: 39px;
margin-left: 10px;
line-height: 39px; 
font-size: 8pt; 
vertical-align: bottom; 
float:left;
display:inline;/* ie double margin fix*/
}

**< div class=“navbar” > **

**< div class=“logo” >< img src=“logo.gif” >< /div> **
**< div class=“navigation” > **
**< a href="#news" class=“navi” >news< /a> **
**< a href="#projects" class=“navi” >projects< /a> **
**< a href="#about" class=“navi” >about< /a> **
**< a href="#info" class=“navi”>info< /a > **
**< a href="#contact" class=“navi” >contact< /a> **
**< a href="#recent" class=“navi” >recent< /a> **
**< a href="#links" class=“navi” >links< /a> **
**< /div> **

< /div>

3

You shoul duse css positioning eg.

div.navigation {
border:none;
min-height: 39px;
margin-left: 10px;
line-height: 39px;
font-size: 8pt;
position:relative;
bottom: 0px;
float:left;
display:inline;/* ie double margin fix*/
}