Aligning a row of floated images to their bottoms

[lostsanity90]

Hey I am very new to the CSS and HTML world, so forgive me if this is something really simple I am over looking.

The problem is I have four images, one of which is taller than the rest. I making a nav bar. I got the images to float and have the desired space between them but the problem is they are aligning to the top of the image. I want them to be all on the same level at the bottom:

html code:

<nav>
<div id="menu">
<ul>

<li><a href="home.html"><img src="home_button_unselected.png" width="134" height="41" alt="home" /></a> </li>
<li><a href="comics.html"><img src="comics_button_selected.png" width="137" height="48" alt="comics"/></a> </li>
<li><a href="animated_shorts.html"><img src="animatedshorts_button_unselected.png" width="255" height="41" /></a> </li>
<li><a href="contact_us.html"><img src="contactus_button_unselected.png" width="179" height="41" /></a> </li>

</div>

</ul>
</div>
</nav>

css code:

#menu {
margin-left: 19px;
position:absolute;
}

nav li {
float: left;
list-style: none;
padding: 0;
margin-top: 230px;
margin-right: 19px;
margin-bottom: 0;
display:table-footer-group;
}

Thank you in advance for all the help.

AJ

[DarkLaika]

Could you possibly link us to the page that's you're working on?

[lostsanity90]

Sorry I can't but here is a image of the page to show the problem:

[ARCLite Studio]

AJ,

Without going into a long explanation what your trying to do takes a bit of manipulation using position:relative and position:absolute on the containing div then the child div's.

But, I'm going to offer a simpler solution, just use a table contained in DIV(menu), set the menu div to position:absolute and then move the menu (DIV) into position as needed:

CSS

#menu { width:765px; height:48px; position:absolute;}
#nav td {vertical-align:bottom;}

HTML

<div id="menu">
<table width="100%" height="48" cellpadding="0" cellspacing="0" id="nav">
<tr>
<td><a href="home.html"><img src="home_button_unselected.png" alt="home" width="134" height="41" border="0" /></a></td>
<td><a href="comics.html"><img src="comics_button_selected.png" alt="comics" width="137" height="48" border="0"/></a></td>
<td><a href="animated_shorts.html"><img src="animatedshorts_button_unselected.png" width="255" height="41" border="0" /></a></td>
<td><a href="contact_us.html"><img src="contactus_button_unselected.png" width="179" height="41" border="0" /></a></td>
</tr>
</table>
</div>

Hope this Helps.