Align text with the bottom of your cell/table

Discussion in 'HTML & Website Design' started by DSR, Feb 5, 2006.

  1. #1
    Hi everyone!

    I am having a problem. I want to add a search field towards the top of my homepage, but need to align it with the bottom of my cell/table without going any further down (or else my background image will look screwy). Is there anyway to accomplish this? I have searched around and had no luck with variou salign functions...

    Thanks for the help! :)
     
    DSR, Feb 5, 2006 IP
  2. LookingForGroup

    LookingForGroup Guest

    Messages:
    26
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can't really tell your exact problem from your words (perhaps a link to the site or a quick picture would help) but have you tried valign="bottom" in the HTML or vertical-align: bottom; in the CSS?
     
    LookingForGroup, Feb 5, 2006 IP
  3. minstrel

    minstrel Illustrious Member

    Messages:
    15,082
    Likes Received:
    1,243
    Best Answers:
    0
    Trophy Points:
    480
    #3
    Or maybe "baseline"? I agree with the previous poster - show us the page and you'll get better assistance.
     
    minstrel, Feb 5, 2006 IP
  4. j-khoa

    j-khoa Guest

    Messages:
    35
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Is it kind of like in this picture where you want the whole search box to be touching the bottom border, instead of being close?

    http://www.tea.5u.com/demo3.htm
     
    j-khoa, Feb 6, 2006 IP
  5. minstrel

    minstrel Illustrious Member

    Messages:
    15,082
    Likes Received:
    1,243
    Best Answers:
    0
    Trophy Points:
    480
    #5
    :confused:

    I'm looking at your screenshot and it looks like everything in that div IS aligned to baseline...
     
    minstrel, Feb 6, 2006 IP
  6. seralavida

    seralavida Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Test</title>
    <style type="text/css">
    table { width:500px; border-collapse:collapse}
    th, td { border:1px solid black; vertical-align: top;}
    th { width:100px; }
    td { background:#ccc; }
    .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; height:200px;}
    .manage { text-align:right; position:absolute; bottom:0; right:0; }
    p{ margin: 0 0 5px 0; }
    </style>


    </head>
    <body >
    <table>
    <tr>
    <th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
    <td><div class="wrap">
    <p><a href="http://www.pronexo.com">www.pronexo.com</a></p>
    <div class="manage">Edit | Delete</div></div></td>
    </tr>

    <tr>
    <th>Cras diam.</th>
    <td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td>
    </tr>
    </table>
    </body>
    </html>
    Shot0001.jpg
     
    seralavida, Feb 10, 2012 IP