Topic: Vertical Align? (Page 1 of 1)

So I have a footer in my page which includes three logos and looks like this:

<div class="footer">
	<div class="airinc"><a href="http://www.air-inc.com">
                <img src="images/airinc.jpg" alt="Go to AIRINC website" 
                width="100px" height="53px"></img></a>
	</div>
	<div class="etf"><a href="http://www.etf-online.com">
                <img src="images/etflogo.jpg" alt="Go to the ETF website" 
                width="100px" height="41px"></img></a>
	</div>
	<div class="traqs"><a href="http://www.traqs.com">
                 <img src="images/TraQsConsulting.jpg" alt="Go to TraQs Consulting website" 
                 width="100px" height="45px"></img></a>
	</div>
</div>

And here is the CSS:

div.footer {
	position:relative;
	float: left;
	top: 0px;
	left: 0px;
	width: 700px;
	padding: 0px;
	padding-top: 50px;
	margin:0px;
	margin-top: 10px;
	border-top: solid silver 1px;
}

div.airinc {
	position: relative;
	float:left;
	left: 0px;
	top: 0px;
	padding: 0px;
	margin: 0px;
}

div.etf {
	position: relative;
	float:left;
	left: 0px;
	padding: 0px;
	margin: 0px;
	margin-left: 20px;
	vertical-align: bottom;
}

div.traqs {
	position: relative;
	float:left;
	left: 0px;
	padding: 0px;
	margin: 0px;
	margin-left: 20px;
	vertical-align: bottom;
}

My problem is I really cannot figure out my logos won't align at the bottom rather than the top. Can anyone help me with this please?

(Edited by kimson on 09-26-2006 11:56)

The vertical align property is really only for tables and inline elements! Doesnt work like that on divs, unfortunately

Thanks H][RO. I wish they would say that on the W3Schools website...

Anyway, shall I align the smaller ones manually with top-padding, top-margin or top: (x)px; ?

[edit] I stuck my images in a <span> each, it seems to work... [/edit]

*********************************************************************************

[edit2] Of course I cannot float them now... any idea how to spread them over the length of the footer? This is something I never seem to be able to get right [/edit2]

(Edited by kimson on 09-26-2006 12:13)

Seeing as you've applied position relative on your images, and footer, try setting bottom: 0; instead of top: 0;

Let us know how you get on.

Cheers,

"End tag: forbidden" - http://w3.org/TR/html401/struct/objects.html#edef-IMG

Post a complete document.

One detail, there is no need for the nested DIVs, you can put the ID in the A tags.

Using padding-top or margin-top on the IMGs would work.

Another approach is to get rid of the IMG tags and use an IR ( Image Replacement ) technique : which consist in using a background image, that you can align at the bottom.

Oh, and last but not least, you should forget w3schools and go straight to the source : the W3C. Download the DTD or the PDF/HTML version of the specification of the standards you use the most. It will be a bit tedious at the beginning but trust me it will pay off.

Thanks all for you answers, I will try and test them all, see which one is best.

poi - I wanna be a gardener...

Earth, nature, plants. Oh yeah.