Aligning text bottom with bottom of parent element

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

0
  1. #1
    hi,

    I already posted something about that issue, but it seems that was not clear enough.
    Here's my problem: I want to have two texts of different font-size in an element, one at the bottom left and one at the bottom right, with the bottom of the texts aligned with the bottom of the parent element.
    I tried with float and display: table-cell; and vertical-align: bottom; with no success (see my previous post http://forums.digitalpoint.com/showthread.php?t=1553286).

    Now I'm trying with position: absolute, and I'm still having issues: the height of the children divs are higher than the texts inside, while I've set line-height to 1.0, and their is some small margin-left in the bottom left (there is some space between the border of the parent element and the first letter of the bottom left element while I set margin and padding to 0...

    Here's a snapshot:
    Screenshot-1.jpg

    Why? What the simplest way to align text bottom to the bottom of the parent element?

    Here's the code:

     <div id="header">

            <div id="bottom-left">
            <a href="/">Bottom Left</a>
            </div>
            <div id="bottom-right">
            Bottom Right
           </div>

</div><!--header-->
    HTML:
    #header{
    width: 60em;
    height: 10em;
    background-color: #c1c3bf;
    margin-bottom: 5em;
    position: relative;
}

#bottom-left{
    position:absolute;
    bottom:0;
    left:0;
    width: 22em;
    background-color: black;
}

#bottom-left a:link, #bottom-left a:visited, #bottom-left a:hover, #bottom-left a:active {
    margin:0;
    padding: 0;
    text-decoration: none;
    color: #fff;
    font-family: Arial,Verdana;
    font-size: 4em;
    line-height: 1.0;
}


#bottom-right{
    position:absolute;
    bottom:0;
    right:0;
    width: 25em;
    color: #fff;
    background-color: black;
    text-align: right;
    line-height: 1.0;
}
    Code (markup):
     
    julj, Oct 31, 2009 IP
  2. megamoose

    megamoose Well-Known Member

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    105
    #2
    What about just using a table?

    
<html>
    <head>
        <title>Test Bottom Aligning</title>
    </head>
    <style>
        div.stickbottom {
          background-color: #E1F3BC;
          line-height: 0px;
        }

        td.tbLeft {
            vertical-align: bottom;
            text-align: left;
        }

        td.tbRight {
            vertical-align: bottom;
            text-align: right;
        }
    </style>
    <body>
        <div class="stickbottom">
            <br /> Some random text <br /> <br /> <br />

           <table width=100% cellspacing=0 cellpadding=0>
            <tr>
                <td class="tbLeft"><font size=20px>This should be stuck to the left</font></td>
                <td class="tbRight">This should be stuck to the right</td>
            </tr
           </table>
        </div>
    </body>
</html>
    Code (markup):
     

    Attached Files:

    megamoose, Nov 1, 2009 IP
  3. dabzo

    dabzo Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    separate div for the text, then set it's position:relative; bottom:0;
     
    dabzo, Nov 2, 2009 IP
  4. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #4
    In your case, the height of both parent and child divs have been fixed. Why not use
    ?
     
    unigogo, Nov 5, 2009 IP