SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Div inside a div bottom allignment

    I have a container div set to 100 by 100 pixels, inside of this div is another div (that has texts) that i wanted it to be at the bottom of the container div. How can i do that?



    thanks in advance!

  2. #2
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    #container {
       position: relative;
    }
     
    #text {
       position: absolute;
       left: 0;
       bottom: 0;
    }

    You'll want to specify some width and whatnot to make sure the text div works appropriately, but that's the easiest way to do bottom aligned.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool! it works! thanks!

  4. #4
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anytime. Make sure to double check in some other not-as-friendly browsers (like IE) to make sure it looks good there also.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,590
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    IE6 fails with that techninque..The best way would be to set (with the inner element with a fixed height of course) position:relative; on the parent, position:abs...nvm I'll put it into code.

    Code:
    #container {   position: relative;} 
    #text {   position: absolute;   left: 0;  top:100%;height:50px;margin-top:-25px;}
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •