1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Aligning Two Float Divs To The Bottom Of A Container

Discussion in 'CSS' started by julj, Oct 30, 2009.

  1. #1
    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):
    Screenshot.jpg

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

    thanks
    SEMrush
    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):
     
    julj, Oct 30, 2009 IP
    SEMrush
  2. edukcuf

    edukcuf Greenhorn

    Messages:
    67
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #2
    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.
     
    edukcuf, Oct 31, 2009 IP
  3. CodedCaffeine

    CodedCaffeine Peon

    Messages:
    130
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    CodedCaffeine, Oct 31, 2009 IP
  4. dabzo

    dabzo Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    dabzo, Nov 2, 2009 IP