aligning a div to the bottom inside a parent div

bottom align within div element

[Stooshie]

I have the following xhtml

<div id="header_image" class="header_image">
<div id="header_description">Image: Workers at Harvest Time</div>
<div id="header_copyright">Image © Phtopolis</div>
</div>

I can align the two inner elements left and right using

#header_description
{
float: left;
}
#header_copyright
{
float: right;
}

However, the I need them both to vertical align to the bottom of the inner div.

I have tried both of the following

{
vertical-align: bottom;
vertical-align: text-bottom;
}

and neither seem to work.

[snip]

It's the header image with the image description and copyright.

If anyone has any ideas I'd be grateful.

Thanks in advance.

[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]

[edited by: createErrorMsg at 10:22 am (utc) on June 29, 2005]

[j4mes]

{
position: absolute;
bottom: 0px;
}

or

{
margin-top: Xpx;
}

where X is required spacing from top.

HTH, J.

[Stooshie]

Hi there,

Thanks for that. However I forgot to mention that I am aiming for level 3 accessibility(AAA) and I don't think that I can use absolute positioning.

Maybe you can correct me on that one.

Best regards,

Andrew.

[j4mes]

Hi,

That's a tough one!

Have you considered making the copyright notice and description part of the image, and then putting both in the title attribute of the image so it's still good for accessibility?

J.

[HelenDev]

I am aiming for level 3 accessibility(AAA) and I don't think that I can use absolute positioning.

I wasn't aware that this was the case. Can anyone elaborate?

[createErrorMsg]

vertical-align: bottom;
vertical-align: text-bottom;

Vertical-align [w3.org] only works to align elements within line-boxes and table cells, not block level elements. There are situations in which you can set an element's line-height to the height of the container, and then use vertical-align, but this doesn't look like one of them.

aiming for level 3 accessibility(AAA) and I don't think that I can use absolute positioning

I've never seen anything that indicates that absolute positioning stands in the way of even level 1 WAI. In fact, abs pos can be a real accessibility boon, as it allows you to order your source code in an accessible way, but still position your elements visually where you want them.

One could argue that position:absolute restricts a page to a set position and therefor limits it's ability to display in a fluid manner, but this is both not part of the accessibility guidelines, and is also untrue. If you position absolutely within relatively positioned parent elements, an abs pos layout can be just as fluid as any other layout scheme.

If anyone is feeling at all unsure about this here's the checklist [w3.org]. It's worth checking for yourself to be sure.

I would make the parent div position:relative, then absolutely position the children inside it as per j4ames' suggestion.

cEM