Text Positioning Problem

I'm trying to figure out how to lay text over a background image. the problem is I need the text to go on the bottom of the div, not in the middle of it. vertical-align seems to have no effect either. Even 5px lower would be enough.

Here's an example of what I have:


<html>
<head>
<title>Div test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
#container { 
border-width : 0px;
padding: 0px 0px 0px 0px; 
margin: 0px; 
width: 720px; 
}
#header {
border-width : 0px;
padding: 0px 0px 0px 0px; 
margin: 0px;
}
.menuitem_about a{
float:left; 
display: block; 
width: 144px; 
height: 25px; 
background-color: #990000;
/*background: url(../Common/menuitem_about.gif) not available, so using background-color instead*/
}
no-repeat; 
text-align:center;
vertical-align: bottom; 
text-decoration:none; 
font-weight:bold;
color:#FFFFFF;
margin: 0px auto; 
padding: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="menuitem_about"><a href="About/about.html">About Us</a></div>
</div>
</div>
</body>
</html>

Text Positioning Problem

need text at the bottom of a div

gryphadmin

alias

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week