CSS Forum

I want to create a vertical navigation bar that is align at the bottom of the container box. I tried it with vertical-align:bottom in the css, even tried to add valign="bottom" in the xhtml doc (what I really prefer to avoid), yet nothing works. Is it because of working with floats?

You don't need to float #weddnav if it is wrapped in a div. It should appear oriented by default in the top left of the div it is contained in. Then put top margin or padding on #weddnav to get it positioned where you want. eg., margin-top:30px; Hope that helps...

No problem. You could try negative bottom margin values, or a define a different class for each nav item. Sizing things identically is probably your best bet though, it often seems to make things easier.

Vertical align (in the way you described) is for tables only. You could achieve that by using non-semantic markup (being tables) if you wanted. I think something that would also work would be to use vertical-align, but only on images, no divs (and therefor no text). This is because vertical-align is assigned to inline elements, to which images are by default a part of.

Not only is it not really possible (properly) to control vertical alignment with the CURRENT specification of CSS, but even if it were, it would conflict with your float.

Vertical alignment without using tables can be accomplished either with hacks/workarounds (display:table-cell for browsers which support; hacks for IE) or javascript.