Aligning a section in column 3 with bottom of column 1 (3-column layout)

Discussion in 'CSS' started by Extranet Guy, Jun 4, 2009.

  1. #1
    I have a 3-column layout; column 1 (navigation menu) is always the longest column. Columns 2 and 3 vary in length. Column 3 has text, below which there is a call to action button, which I want to always align with the bottom of column 1, rather than having it move with the length of the text in column 3. Would appreciate any help; I still struggle with positioning issues like this. Here's a link to the page in question: http://workzone.com/newsite/product-tour/tracking-projects.jsp. Thanks!
     
    Extranet Guy, Jun 4, 2009 IP
  2. unigogo

    unigogo Peon

    Messages:
    286
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If the button is put in column 3, it will always move with the length of the text in column 3. It will not align with the column 1.

    Try this ideal. Add a <div> below the 3 columns with the width:100%. Put the action button in this <div>. Using margin-left to make the button align with column 3 horizontally. Using negative margin-top to make the button align the column 1 vertically.

    The demo

     
    unigogo, Jun 6, 2009 IP