Mywebdunia's Blog

Well all of us might be knowing how to align a text or an image at the bottom when you are using a table. Just say vertical-align:bottom; this will work out. But when you are working with div’s this woun’t work out. So for this to work we need to give the div’s some special treatment. The down below code will get you the this working in the div’s.

HTML code :
<div id=”outerLogo”>
<div id=”innerLogo”>
<div id=”logo”>
<a href=”index.htm” title=”Ideaken”><img src=”images/logo.gif” alt=”alt text” border=”0″ /></a>
</div>
</div>
</div>

CSS code :

<style type=”text/css”>
#outerLogo {
width:220px;
height:140px;
}
#innerLogo {
width:220px;
height:100%;
position:relative;
}
#logo {
position:absolute;
bottom:0;
left:0;
}
</style>

With this the logo div with position absolute and bottom as 0 makes it to get align at the bottom. The relative positioned div inherits its height from its parent.

This code is checked with the mozilla, IE – 6 and IE -7.

Related to this post:
Vertical align Div Center