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:

And my CSS (looks ugly as i'm working on the layout):


2 answers

o.k.w 2355
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.

    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:

Answered over 8 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 over 8 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 over 8 years ago
Mottie 1134

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 over 8 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 over 8 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 over 8 years ago