SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Tacoma, WA
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Expanding the Height of an Object from Bottom Up

    It's been a while since I have messed around a lot of the more advanced parts of CSS. I can't remember if there is a way to get things to expand from the bottom up.

    Here's an example of what I'm talking about, if I put content in something instead of it's height growing from the top down it grows from the bottom up much like a graph chart functions, even though I'm not developing a graph chart.

    Wait, let me better explain this so I don't bring confusion. I have three boxes, each with a different height. First box is the shortest and the third box the tallest. All three boxes need to line up on the bottom.


    Is there a way to do this or an article that explains this?

    Thanks!

    Tony.
    Last edited by t3projects; Sep 6, 2007 at 18:04. Reason: better explanation

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you just want them to appear to have equal height or do you really want the contents of all to be aligned at the bottom instead of the top?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think he's saying he wants the bottom on all to be equal and as content is added for it to grow vertically. good question. anyone?

    can u absolutely position something by its bottom corner and then as content is added it would just grow up? yes? no?
    Steve Davis

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2004
    Location
    Tacoma, WA
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @craniumdesigns = yes exactly. I want the boxes to grow vertically from the bottom up as content is added. I don't think I have ever heard of anything doing that yet I'm sure there is a way to do that, at least I think.

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you do want it aligned to the bottom? To do that with absolute positioning would either be really brittle or would require a bunch of JavaScript.

    You could do this with display:table and display:table-cell but IE7 doesn't support those.

    CSS was just designed to work best from top to bottom and left to right.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

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

    If you don't mind the odd pixel rounding difference you could do something like this:

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

    Works in IE6 and ie7 and all browsers that support display table such as opera and Firefox.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works in IE5.x/Win too.

    Thanks, Paul. I forgot that the vertical centering technique workaround for IE/Win could be modified to do this.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •