Pushing the limits of CSS
This weekend I got asked why the following piece of code:
<div style="vertical-align: bottom; border: 1px solid black; width: 300px; height: 100px; ">At the bottom?</div>produces a box that looks like this:
Why wasn't the text aligned along the bottom edge of the box? Why wasn't the CSS vertical-align property taking effect?
After a few minutes trying to get it to work I realised I was assuming I knew exactly what the vertical-align property was all about. Turns out I was wrong. To find this out I searched for "vertical-align" in TopStyle's help file. This took me to a copy of this WDG help page where it describes what it does and how it works (emphasis my own):
The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)
The keyword here is "inline". DIVs are not inline elements! The property only has an effect on elements that are in a line with other elements.
At this point I explained this to the person who asked the question and asked what it was they were trying to do. They wanted to have a table cell where there was some content at the top of the cell and then a few lines that appeared at the bottom of the cell. To the best of my knowledge there is no easy way of doing this.
The first lesson here is that you should never assume a CSS property does what it sounds like you think it should do. The second lesson is that when you're looking for help it's sometimes better to describe the whole scenario that just a small part of it.
Skip to the 
You can subscribe to an individual
I can't think of an easy way that plays nice with web standards. A quick and dirty test I just tried was:
[TABLE]
[TR]
[TD style="border:2px solid #000000; height:300px; vertical-align:top"]
Hello, this is at the top.[br]
[table height=300px][tr][td style="vertical-align:bottom;"]Hi, this is at the bottom[/td][/tr][/table]
[/TD]
[/TR]
[/TABLE]
My brief tests seems to work OK, if you can tolerate the whole table thing.
I faced the same problem a while ago. The only way I could get around it was using tables. Though I don't use div's that often, it made me even more reluctant to use them.
This did it for me:
[div style="border: 1px solid black; width: 300px;"]
[div]Stuff[/div]
[div style="padding-top:150px;"]More Stuff[/div]
[/div]
I have used both methods that Andy and Trent mentioned. Unfortunately, I have used the table example more often because it plays better with more browsers. After all, I need to make sure it looks "similar" in Internet Explorer, Netscape, Mozilla, FireFox and Safari.
Appreciate the feedback guys, but they are all what I would call hacks. No offence intended. I know that when you work for a boss it's case of get it to work at whatever cost. I'm down with that ;o) What I was trying to get across was that CSS (as if you didn't know) can not do everything. Not nearly!
You make your table cell "position:relative" then your content that appears at the bottom is in a div which is "position: absolute;bottom:0px". Here is a snippet that works, and I would say is not hackish :) I had a simpler version but that only worked in IE, not Firefox. This one works in both (IE5.5 and Firefox 0.8).
[table]
[tr]
[td style="height:100px;vertical-align:top;"
[div style="position:relative;height:100%;"]This is at the top.
[div style="position:absolute;bottom:0px;left:0px;"]This is bottom[/div]
[/div]
[/td]
[/tr]
[/table]
That seems hackish to me. What you are doing is: creating a table; doing an absolute positioning what has nothing to do with that table.
The core problem is that css has no element that can eat up the space vertical. You can do wonderful horizontal alignment, but you can't do vertical alignment. And I'm sure that nobody can tell my why "absolute" means "to visible screen" and not "to document". All in all it seems that there's no way other than tables. I can't understand these people's telling me "use divs". I've also checked css zen garden, but they also have no solution - they use floating elements.
Here's a workaround (not a solution) that is similar to Marcin's, but without using tables.
There are two caveats to this method: you must nest a div tag within another div tag (the inner one will have bottom: 0px, and the outer one will set border, height, etc.), and you must set both DIV tags to use absolute positioning.
This code works:
[div style="position: absolute; vertical-align: bottom; border: 1px solid black; width: 300px; height: 100px;"]
[div style="position: absolute; bottom: 0px;"]At the bottom?[/div][/div]
(note: Thanks to my buddy Willy - he's really the one who found this answer.)
-- droxford
Unfortunately, none of this code works when you are trying to deal with relative height. :( droxford has the best answer so far, but just try setting the height to 100%... it is fine in NN but IE completely falls apart. I am still searching for a solution to this but if anyone else can figure it out I'd appreciate it. Why must IE be so evil?
Tim. Height:100% is easy in IE:
height:expression(document.body.clientHeight);
Works a treat in IE and all other browser ignore it. Make sure yuo put this style definition *after* any other height settings in your stylesheet.
Jake: that's fine, as long as you interpret height: 100% to mean 100% of the viewport.
It doesn't work when the element is contained by another element with a specified height =(
Well, standard browsers (pretty much most of them besides IE) should support something like this:
<div style="display:table;">
<div style="height:400px;display:table-cell;vertical-align:bottom;">
Testing
</div>
</div>
but of course IE doesn't. I'm still searching for a CSS expression that will work in IE for bottom aligning. My main problem so far is finding out the height of the font -_-
The vertical-align: bottom property seems unneccessery in oxford´s solution, this snippet works as well:
[div style="position: absolute; border: 1px solid black; width: 300px; height: 100px;"]
[div style="position: absolute; bottom: 0px;"]At the bottom? Yup[/div][/div]