[thelist] aligning content to the bottom of a div (vertical-align: bottom?)

[Ben Henick]

On Fri, 24 Jan 2003, Sarah Sweeney wrote:

> I am trying to create a div which will contain text and/or images, and I
> would like to force the contents of the div to go to the bottom of the div.
> The vertical-align property seems like it should do this, but because it is
> an in-line property, not a box property, it doesn't work as expected. Does
> anyone know of a way to accomplish this (without resorting to absolute
> positioning)? Below is sample code, the first showing where the div
> contents go by default, the second showing the closest I have come to a
> solution. Any help is appreciated!

If you are relying on a CSS-only solution, the best way to achieve the
desired result is with positioning, either relative or absolute.  As long
as all of your elements contain SOME kind of content, you should be in the
clear.

To turn an inline element into a block element, set 'display: block;' as
one of the style rules for that element.  This will fail miserably (most
of the time) in Netscape 4, but succeed in most other CSS-capable
browsers.

If you're at all interested in working with offsetTop and offsetHeight
(DOM properties which may well be in the DOM2 Recommendation, though I've
not checked yet) there are also ways to accomplish this goal of yours via
scripting.


--
Ben Henick                     "In the long run, men hit only what they aim
Web Author At-Large             at.  Therefore, though they should fail
http://www.io.com/persist1/     immediately, they had better aim high."
persist1 at io.com                 -- Henry David Thoreau