Aligning Two Float Divs To The Bottom Of A Container

hi,

I've got a float left div and a float right div in a container. When trying to align them to the bottom of the container using display: table-cell; and vertical-align: bottom;, the highest one is at the bottom, but the top of the smallest one is aligned with the top of the highest one.

Here's a screenshot (I'd like the bottom of float right div to be aligned with the bottom of the #header div):


What's wrong? How can I have the bottom of both the float divs align with the bottom of the container?

thanks

Here's my code:

<div id="header">            
    <div id="logo">
        Float left
    </div>
 
     <div id="login">            
          Float right
      </div>
</div>

HTML:

#header{
    width: 60em;
    height: 10em;
    overflow: hidden;    
    display: table-cell;
    vertical-align: bottom;
}
#logo{
    width: 20em;
    float: left;    
    font-size: 5em;
}
 
#login{
    width: 25em;
    float: right;
    font-size: 5em;
}

Code (markup):

 

For the #login CSS you could add

margin-top:20px;

or whatever the number of pixels is needed to move it down to align with the bottom.

 

Considering it's a header that doesn't have dynamic content (or that needs to fit the one place), set a defined height for each.

 

other method: set div of width of container beneath main content div, then from there, make sure each "cell" div is half of, or they sum up to the width of the other div, same heights all along. float all in same dir, ie:left. floating left, right, center makes more hassles in the long run, usually.

OR, use relative positioning.