Question

I have a title and a nav menu that need to be aligned left and right respectively on the same line.

My research has told me that this can be done using float: left and float: right with clear: both. This does work when the text is the same size, but when the title is a larger font size than the nav menu, the nav menu does not align with the bottom of the line, it aligns with the top like this:

_____     _____         ___ 
  |    |    |    |     |                                    Link 1    Link 2    Link 3
  |    |    |    |     |___
  |    |    |    |___  |___

What I am trying to achieve is this:

_____     _____         ___ 
  |    |    |    |     |    
  |    |    |    |     |___
  |    |    |    |___  |___                                 Link 1    Link 2    Link 3

I’ve made a fiddle here

How can i get the nav menu to sit at the bottom of the line?

Answer 1

I’ve modified your jsFiddle and made it right : http://jsfiddle.net/Z3a6Z/8/

Here are the main changes I’ve made in the CSS :

#menu
{
    position: relative;
    float: right;
    height : 100px;    
    width: 160px;
}

#menu ul {
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
}