Vertically aligning text at the bottom

Why are the simple things always the hardest?
:throw:


I have two divs inside a container div.
DivOne may be a single line of text... or it may wrap to 2 lines.
DivTwo will always be a single line.
I want both of them to align at the bottom of the container div (regardless of whether DivOne is one line or two.)

This doesn't work:

Code: Select all

.wrap {
    vertical-align:bottom;
}

.divONE {
    width:120px;
    vertical-align:bottom;
}

.divTWO {
    width:280px;
    vertical-align:bottom;
}

Changing "bottom" to "text-bottom" on one or more (or all or none) doesn't work, either.

Surely there's an easy way to do this?

See if this link helps you...http://phrogz.net/CSS/vertical-align/index.htmlhttp://phrogz.net/CSS/vertical-align/index.html

It supports the conclusion I came to within minutes of that post last night - "Screw it. I'm going back to tables." (Not for everything. Just for that particular page.) Thanks for the help, though, Linda!

What about positioning? That would do it easily.

How? I've been trying that and failing miserably!

I don't really understand exactly what you're looking for, but try playing with this:

Code: Select all

.wrap {
    position: relative;
}
.divONE, .divTWO {
    position: absolute;
    bottom: 0;
}

I've already reverted back to a table, but I still want to learn...

So, as long as I don't specify a value for left or right, I can still have 2 divs/elements sitting side-by-side? (But they'll be bottom-aligned within the container so it won't matter whether the height of the one on the left expands or not?)