Sent by Sarah Sweeney on 27 January 2003 16:04
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;
basically, I want it to do the same thing as when you have a table cell
with valign="bottom". 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? I don't want to use absolute
positioning, because the items will not have a pre-determined size, so it
will be very difficult, if not impossible, to determine where they should
be positioned. 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!
<div style="height: 100px; background-color: #ffcccc;">
at the top
</div>
<div style="height: 100px; background-color: #ccccff;">
<span style="line-height: 100px; vertical-align: -50%;">almost at the
bottom</span>
</div>
TIA,
Sarah
