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

Sarah Sweeney ssweeney at w3internet.com
Fri Jan 24 23:28:00 CST 2003


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!

<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>

Sarah




More information about the thelist mailing list