homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Vertical-align to bottom inside a tab
Some grid based CSS help

10+ Year Member

Msg#: 3735006 posted 3:43 pm on Aug 30, 2008 (gmt 0)


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


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]



WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3735006 posted 6:54 pm on Aug 30, 2008 (gmt 0)

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


5+ Year Member

Msg#: 3735006 posted 11:15 pm on Aug 30, 2008 (gmt 0)

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.


10+ Year Member

Msg#: 3735006 posted 7:21 am on Aug 31, 2008 (gmt 0)

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!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved