Newbie question, but I can't really figure it out. I have three divs. Two of these make a header with a Title (float: left) and a Tabbed Navigation (float: right), with the main content below (clear: both)

Now, the Tabs should sit right on top of the content, which works great as long as the Title div isn't too big. But if I increase the font-size, the Tabs seem to be like "vertical-align: middle".

Example of float

I can't figure out a way to have the tabs sit on the content area (the equivalent of vertical-align: bottom). Wrapping both floating divs in another div and setting vertical-align on that doesn't help.

Here is my markup: http://pastebin.com/f7973417c

And my CSS (looks ugly as i'm working on the layout): http://pastebin.com/f32fe9e73

Thanks!

2 answers

o.k.w 2355
1
point
This was chosen as the best answer

Ok, this is not the ideal solution, more like a quickfix but I think it should give you a good idea.

Basically from Firebug, I found pageTitle class gives the DIV a height of 30px. With the pageNavigation DIV is only 21px.

What I did is to add padding to the top of the navigation so that it at least match the height of 30px.

#pageNavigation
{
    float: right;
    padding-top: auto;
    padding-bottom: 0;
    padding-top: 9px; /* <==== added this */
}

The screenshots of the fixed code from (top-down), Chrome, IE8, FF3.5:
Screenshot

Answered almost 7 years ago by o.k.w
  • Thanks for the Firebug tip. Was hoping for something that is either automatic or that can be calculated from the CSS so that if I tweak the font/size I don't have to guess what the new height is. Michael Stum almost 7 years ago
  • After trying 2 alternatives (the one above and using a table), this works best and is the layout I want: The tabs should be smaller than the Page Title Michael Stum almost 7 years ago
Mottie 1134
0
points

Try using line-height and a little math

Your title is 25px + 5px margin (from #pageContent), so all you have to do is set the line-height: 30px

#pageNavigation ul li {
    float: left;
    border: 1px solid #6c6;
    border-bottom-width: 0;
    margin: 0 0.5em 0 0;
    line-height: 30px;
}

Also because you have a hover color, you'll have to increase the padding of that as well: I picked 0.5em arbitrarily and it seemed to fit, so you may have to adjust this

#pageNavigation ul li a {
    padding: 0.5em 1em;
}
Answered almost 7 years ago by Mottie
  • Was hoping to have something "automatic", but thanks for actually pointing out how the correct value is determined, will use that for now. Michael Stum almost 7 years ago
  • Hmmm... Line-Height sadly increases the size ob the tabs and the padding is a bit too much guesswork. I think I switch to a table-based layout for that. Michael Stum almost 7 years ago