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!
