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.
Not a Member? <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?!) :-/
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.
<!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.
Not a Member? <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.
Not a Member? <a href="">Start Here</a> </p>
</body>
</html>