Bottom Alignment in <div>

I have my Company Logo (36px high) and a Welcome Message (0.8em high).


	<h1 id="homePage">
		<span></span>Debbie's Company: Building Your Own Small-Business
	</h1>

        <!-- Display Welcome -->
        <p id="welcome">
          <span id="hello">Hello.</span>
            <a href="">Log In</a> to access premium content.
            &nbsp; Not a Member? &nbsp;<a href="">Start Here</a>
        </p>

The problem is that I need to vertically align each of these items, so that the bottom-edges are on the same line, but each has different heights so it is a pain using different margins/padding to line things up?!

I gave my “welcome” a height of 36px too.

Now I just want a way to “bottom-align” the “welcome” so that the bottom-edges match up. (Hope you can follow me?!) :-/

Thanks,

Debbie

You’ve posted only a snippet of the html and not what else might be in the container holding those 2 items.

But in any case, without seeing the rest of your html I normally use either margin-bottom: 0px or if I use css postioning, then I set bottom: 0px to vertically align elements.

Both work for me.

Did you mean something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#homePage,#homePage span{
	width:220px;
	height:36px;
	overflow:hidden;
	position:relative;
	display:inline-block;
	vertical-align:bottom;
	margin:0;
}
#homePage span{
	background:red;	
	position:absolute;
	left:0;
	top:0;
}
#welcome{
	background:blue;
	display:inline-block;
	vertical-align:bottom;
	margin:0;
}
* html #homePage,* html #welcome{display:inline}/* inline block fix for ie6*/
*+html #homePage,*+html #welcome{display:inline}/* inline block fix for ie7*/


</style>
</head>

<body>
<h1 id="homePage"> <span></span>Debbie's Company: Building Your Own Small-Business </h1>

<!-- Display Welcome -->
<p id="welcome"> <span id="hello">Hello.</span> <a href="">Log In</a> to access premium content.
		&nbsp; Not a Member? &nbsp;<a href="">Start Here</a> </p>
</body>
</html>


It uses display:inline-block and vertical-align:bottom to align the elements. The problem is that if the text wraps then the p element will wrap as a block which may not be suitable. If the p element does not need any specific block styling then you could turn it into an inline element instead.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#homePage,#homePage span{
	width:220px;
	height:36px;
	overflow:hidden;
	position:relative;
	display:inline-block;
	vertical-align:bottom;
	margin:0;
}
#homePage span{
	background:red;	
	position:absolute;
	left:0;
	top:0;
}
#welcome{
	background:blue;
	display:inline;
	vertical-align:bottom;
	margin:0;
}


</style>
</head>

<body>
<h1 id="homePage"> <span></span>Debbie's Company: Building Your Own Small-Business </h1>

<!-- Display Welcome -->
<p id="welcome"> <span id="hello">Hello.</span> <a href="">Log In</a> to access premium content.
		&nbsp; Not a Member? &nbsp;<a href="">Start Here</a> </p>
</body>
</html>