In the following example, I want the bottom of the site name text "site name" and the bottom of the menu text "menu 1 menu 2 menu 3" to align flush with the bottom of the container they're in (header). As it is now, the sitename text is some number of pixels above it's container's bottom edge, while the menu text is a different number of pixels above that same edge. I want both elements to be sitting on the same line.
It seems that using line-height can push it down through trial and error with different values, but the result isn't consistent across browsers (e.g. i can get them flush in Safari and Chrome, but then Firefox looks different). There has to be a better way?
Also, is there a better way to force the menu into that bottom-right corner other than the way I've done it?
thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}
body {
text-align: center;
}
#container {
margin:0 auto;
margin-top:20px;
width:800px;
border:1px solid red;
text-align: left;
}
#header {
float:left;
position:relative;
width:100%;
border:1px solid green;
}
#sitename {
float:left;
left:0px;
bottom:0px;
margin:0;
padding:0;
border:1px solid blue;
}
#sitename h1 {
font-weight: normal;
}
#menu {
position:absolute;
right:0;
bottom:0;
line-height:1em;
float:right;
list-style: none;
border:1px solid blue;
}
#menu ul li {
list-style: none;
float:left;
padding: 0 0 0 15px;
}
#sitename h1 {
font-size: 3em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="sitename">
<h1>site name</h1>
</div>
<div id="menu">
<ul id="nav">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
</div>
<div id="content">
<p>here is some content.</p>
</div>
<div id="footer">
<p>here is the footer.</p>
</div>
</div> <!-- container -->
</body>
</html>