SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    controlling the vertical position in a <div>

    Code:
    <td style='height:30px' valign='bottom'></td>
    In a table cell, valign in the above works fine.



    But in a <div> valign in the below doens't work.
    Code:
    <div style='height:30px' valign='bottom'></div>
    How can I control vertical position in <div>?

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May be an answer for you here

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div style='height:30px;vertical-align:text-bottom'>1111</div>
    <div style='height:30px;vertical-align:text-top'>2222</div>
    <div style='height:30px;vertical-align:text-bottom'>3333</div>
    <div style='height:30px;vertical-align:text-top'>4444</div>
    I made the code above expecting the vertical gap between 1111 and 2222 are narrower than the gap betwwen 2222 and 3333.

    But the browsing result of the code above doesn't work correctly.

    What's wrong with the code above?


    How can I make the gap between 1111 and 2222 narrower than the gap between 2222 and 3333?

  4. #4
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, this is for text - the link I gave you is for images. You can specify how the text positions using padding for example.

    For ex.

    HTML Code:
    <div style="padding:15px 0 0 0;border:#000000 solid 1px">some text</div>
    <div style="padding:0 0 15px 0;border:#000000 solid 1px">some text</div>
    <div style="padding:0 0 15px 0;border:#000000 solid 1px">some text</div>
    <div style="padding:15px 0 0 0;border:#000000 solid 1px">some text</div>

  5. #5
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If that does what you want you should then move the styles to the head or separate style sheet:

    Code:
    .text_bottom {
    padding:15px 0 0 0;
    border:#000000 solid 1px;
    }
    .text_top {
    padding:0 0 15px 0;
    border:#000000 solid 1px;
    }
    HTML Code:
    <div class="text_top">some text</div>
    <div class="text_bottom">some text</div>
    <div class="text_bottom">some text</div>
    <div class="text_top">some text</div>
    Last edited by Rob_D; Nov 1, 2006 at 06:02. Reason: spelling

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Vertical align deals with the vertical alignment of elements within that single line in respect to each other

    This example shows it more clearly.

    http://www.pmob.co.uk/temp/vertical-align.htm


    If you have only one element then there is no other inline box for it to align against and therefore nothing happens.

    I'm not sure what you want to do exactly but you could use padding to nudge things closer.
    e.g.
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    p.bottom{padding-top:20px}
    </style>
    </head>
    <body>
    <p class="bottom">1111</p>
    <p>2222</p>
    <p class="bottom">3333</p>
    <p>4444</p>
    </body>
    </html>
    Hope that helps


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •