Aligning text to the bottom of a div: am I confused about CSS or about blueprint?

Question

I've used Blueprint to prototype a very simple page layout...but after reading up on absolute vs. relative positioning and a number of online tutorials regarding vertical positioning, I'm not able to get things working the way I think they should.

Here's my html:

<div class="container" id="header">
  <div class="span-4" id="logo">
    <img src="logo.png" width="150" height="194" />
  </div>
  <div class="span-20 last" id="title">
    <h1 class="big">TITLE</h1>
  </div>
</div>

The document does include the blueprint screen.css file.

I want TITLE aligned with the bottom of the logo, which in practical terms means the bottom of #header.

This was my first try:

  #header {
    position: relative;
  }

  #title {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

Not unexpectedly, in retrospect, this puts TITLE flush left with the left edge of #header...but it failed to affect the vertical positioning of the title. So I got exactly the opposite of what I was looking for.

So I tried this:

  #title {
    position: relative;
  }

  #title h1 {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

My theory was that this would allign the h1 element with the bottom of the containing div element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.

At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!

Answer 1

don't go changing positioning or floating of the blueprint classes. That will mess up the framework.

What you are trying to do is going to be difficult, because what you are trying to do (I assume) is align the baseline of the type with the bottom of the image. There is no easy way to determine the baseline of type via CSS. So getting them aligned is going to be entirely dependent on the particular font that loads for your user. If your image is 50px high, you could start by setting the line height of your h1 to 50px and then tweak from there. But understand that there will be variance from browser to browser, font to font.

You're probably better off making your headline part of the image then use some image replacement techniques to hide the text.

Answer 2

Give this a go and let me know if it is what you are trying to achieve?

HTML:

<div id="container">
    <div class="logo">Logo here</div>
    <h1>TITLE</h1>
</div>

CSS:

#container{
    background-color:#ccc;
    position:relative;
    width:300px;
    height:200px;
}

.logo{
    width:110px;
    height:40px;
    background-color:#ff0000;
    margin: 0 auto;
}

#container h1{
    font-size:120%;
    font-weight:bold;
    text-align:center;
}

Here's a live demo: http://jsfiddle.net/jrLL2/