Expanding the Height of an Object from Bottom Up

[t3projects]

It's been a while since I have messed around a lot of the more advanced parts of CSS. I can't remember if there is a way to get things to expand from the bottom up.

Here's an example of what I'm talking about, if I put content in something instead of it's height growing from the top down it grows from the bottom up much like a graph chart functions, even though I'm not developing a graph chart.

Wait, let me better explain this so I don't bring confusion. I have three boxes, each with a different height. First box is the shortest and the third box the tallest. All three boxes need to line up on the bottom.


Is there a way to do this or an article that explains this?

Thanks!

Tony.

[Kravvitz]

Do you just want them to appear to have equal height or do you really want the contents of all to be aligned at the bottom instead of the top?

[CraniumDesigns]

i think he's saying he wants the bottom on all to be equal and as content is added for it to grow vertically. good question. anyone?

can u absolutely position something by its bottom corner and then as content is added it would just grow up? yes? no?

[t3projects]

@craniumdesigns = yes exactly. I want the boxes to grow vertically from the bottom up as content is added. I don't think I have ever heard of anything doing that yet I'm sure there is a way to do that, at least I think.

[Kravvitz]

So you do want it aligned to the bottom? To do that with absolute positioning would either be really brittle or would require a bunch of JavaScript.

You could do this with display:table and display:table-cell but IE7 doesn't support those.

CSS was just designed to work best from top to bottom and left to right.

[Paul O'B]

Hi,

If you don't mind the odd pixel rounding difference you could do something like this:

http://www.pmob.co.uk/temp/vertical-...ext-bottom.htm

Works in IE6 and ie7 and all browsers that support display table such as opera and Firefox.

[Kravvitz]

It works in IE5.x/Win too.

Thanks, Paul. I forgot that the vertical centering technique workaround for IE/Win could be modified to do this.