I'm working on a new site and I'm trying to edit the CSS header so that I can fit in my logo which is 160px height. My biggest problem is the subheader which I cannot seem to get to flush with the bottom. Can anyone help me with this? Here is the relevant CSS code

#header {
  padding: 7ex 0;
  color: #000000;
  background-image: url('http://chibabeat.com/images/side2.jpg');
}
.headerTitle {
  color: black;
  margin: 0;
  padding: 0.25em 4mm 0.25em 4mm;
}
.headerTitle a {
  color: #000000;
  background-color: transparent;
  text-decoration: none;
  font-size: 110%;  /* For MSIE */
  font-color: #000000;
  font-weight: bold;
  font-style: italic;
}
.headerTitle > a {
  font-size: 138%;  /* For fully standards-compliant user agents */
}
.headerTitle span {
  color: Black;
  background-color: transparent;
  font-weight: normal;
}
.subHeader {
  color: white;
  background-color: black;
  font-size: 109%;
  text-align: center;
  margin: 0px;
  padding: .5ex 0 ;
 
}
.subHeader a {
  color: white;
  background-color: black;
  text-decoration: none;
  font-weight: bold;
  margin: 0;
  padding: 0 1ex;
}
.subHeader a:hover {
  color: black;
  background-color: white;
}

The only true way I've seen that won't use tables and still get something to flush to the bottom is by putting the text inside of an image and using margins (or absolute positioning if you really know what you're doing, but that's not for newbies) to position the text X pixels from the top.

So...if your subheader is 25 pixels high, you'd set a margin-top of 135px (since 135 + 25 = 160).

You'll never get it to work with scalable text simply because it's scalable, unless perhaps you put it in a table cell (haven't tried that yet) with vertical-align: bottom defined. vertical-align: bottom in a div doesn't work with all browsers (IIRC IE doesn't handle it right).

That did the trick! Arigatou gozaimasu!

I don't know whether to say "you're welcome" or to ask for fries with that.

I thought maybe "God Bless You" might be in order...

God Bless You!