Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts

    using vertical align

    for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code,
    #outer{
    position: relative;
    float: left;
    width: 900px;
    height: 200px;
    }
    #outer .inner{
    position: relative;
    float: left;
    width: 500px;
    height: 200px;
    vertical-align: bottom;
    }

    however the content of the inner div is starting at its default location which is top left of the inner div

    instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases.

    please advice.

    thanks.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    #outer{
    position: relative;
    float: left;
    width: 900px;
    height: 200px;
    }
    #outer .inner{
    position: absolute;
    left:0;
    bottom:0;
    width: 500px;
    height: 200px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for replying

    the code works however if a same height value is mentioned for the inner div then the inner div content starts at its default location top left so i had to specify the height as auto to the inner div or a value of less than the height of the container div

    setting height to auto for inner div works best

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re:

    As far as I know vertical-align can only be used for images. In XHTML


  •  

    Posting Permissions

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