DIV Vertical Alignment

Discussion in 'CSS' started by ORiN, Jan 20, 2010.

  1. #1
    Hi all,

    The website I am trying to code is located at http://twurl.cc/22wp.

    The 'Read More' buttons are styled by a common CSS class. However, I would like them to be aligned from the bottom left corner. Any ideas how to do that with CSS? I have been scratching my head for a while regarding this issue.
     
    ORiN, Jan 20, 2010 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    To get them at the bottom, you'd need to actually position them there I believe.

    If main-box-body and side-box-body were position: relative, then the buttons themselves can be abso-po'd and left: whatever bottom: whatever.

    Otherwise you'd prolly need to put those buttons in another box whose top padding was equal to the padding at the bottom of the two boxes... I think that would be more difficult to wrangle cross-browser though.
     
    Stomme poes, Jan 20, 2010 IP
  3. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes, definitely try some absolute positioning.

    Set the parent container to position:relative and the buttons to position:absoulte, then as mentioned you can set the following properties on the buttons:

    bottom:0; left:0;

    or whatever integer you need.
     
    pmek, Jan 20, 2010 IP
  4. ORiN

    ORiN Well-Known Member

    Messages:
    753
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    130
    #4
    Thanks for your insights! I will go try out what you mentioned.
     
    ORiN, Jan 20, 2010 IP
  5. sp2h

    sp2h Peon

    Messages:
    189
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #5
    first set postion relative and set left: top:
     
    sp2h, Jan 20, 2010 IP