View Full Version : Aligning a row of floated images to their bottoms

01-23-2012, 10:15 PM
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:

<div id="menu">

<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>



css code:

#menu {
margin-left: 19px;

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

Thank you in advance for all the help.


01-23-2012, 10:19 PM
Could you possibly link us to the page that's you're working on?

01-23-2012, 10:43 PM
Sorry I can't but here is a image of the page to show the problem:

ARCLite Studio
01-24-2012, 02:36 PM

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:


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


<div id="menu">
<table width="100%" height="48" cellpadding="0" cellspacing="0" id="nav">
<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>

Hope this Helps.