I need to center a piece of text "main" with another piece of text "sub" sticking out to the right. I don't want both to be centered. Center "main", with "sub" on the right. It doesn't need to work in IE6. I've got it working, but the bottoms of the text don't line up right. I applied the style bottom:.2em and that got it working. But I want to know if there is a more logical way of aligning the bottoms of the text. You can fiddle with it here link text
Update: How can I get rid of the padding around "main" and "sub"? that might help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{padding:0;margin:0}
.container{
border:thin solid yellow;
text-align:center;
}
.main{
border:thin solid blue;
display:inline;
position:relative;
font-size:4em;
}
.sub{
border:thin solid red;
position:absolute;
left:100%;
font-size:.5em;
bottom:.2em;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
Main
<div class="sub"> (Sub)</div>
</div>
</div>
</body>
</html>