Vertical-align to bottom inside a tab

Some grid based CSS help

[craig1972]

Hi.

I'm stuck trying to bottom-align a bunch of tabs. BAsically my structure is here:

<snip>

I have succeeded in creating a structure like the one in that figure. But it's the box numbered "B" that is giving me a problem. This is all for a top header of the page so I have some flexibility with making the heights fixed (widths are liquid).

How can I make sure that the box B is fixed height, and that the tabs A-E are bottom aligned? The code I have seems to work ok in Safari and Opera but not in Firefox and IE. Also, I do it with padding-top in px but that's hardly a decent solution.

Any ideas how vertical-align (which is the most useless property!) can be used for this, or some alternative? Thanks!

[edited by: DrDoc at 8:07 pm (utc) on Aug. 30, 2008]
[edit reason] No URIs, please. See posting guidelines. [/edit]

[swa66]

Craig, try posting (minimal) code. Links are generally frowned upon unless it are authoritative sources like e.g. w3.org or so.

[csuguy]

Vertical-align isn't entirely useless - you just have to do a little bit of setup to get it to work like you think it would. You can use a table - which is the easiest way to vertically align a specific area (works with block lvl elements and inline elements), or you can use a technique I developed using invisible images (only works with inline elements). Please post your code as swa66 has mentioned and we will be able to help you.

[craig1972]

Thanks. I think I have figured it out with "display: block" and "clear: both" to place the DIVs, so it seems to be working for now. Fortunately it's a header so the pixels can be fixed. Thanks!