Grow your CSS skills. Land your dream job.

how do i dynamically set the height of a div to another div?

  • # August 3, 2009 at 8:50 pm

    Hello everyone,

    I have a web page:

    http://infiniteheart.net:360/test

    Where I would like to have the right column be bottom aligned to the left column.
    And the 3 flash boxes above it to have the correct height assigned so as to stretch to match the remaining space created.
    How can I do this?

    I’ve tried using inherit, auto, 100% or 25%, 33% height setting combinations, to not avail.

    Obviously the solution needs to work in IE as well as in other browsers.

    Thank you so much for your help with this puzzle!

    Kind,

    Sebastian.

    # August 4, 2009 at 2:25 am

    Well, to get the right column to stick to the bottom, you’ll need to do some sort of absolute positioning with "bottom: 0". As for the three flash boxes, I’m not 100% sure what you mean.

    # August 4, 2009 at 12:24 pm

    Hello "theDoc" thanks for your reply.

    I have tried "position: absolute; bottom:opx;" but this simply places the page at the bottom of the current browser screen’s height, and not at the bottom of the entire page [scroll bar included] that would make it match the left column. This is not a solution.

    As for the flash elements. Once I can get the bottom right-text element to algin at the bottom of the page correctly, the remaining space will need to be exactly filled [with no dead space] by the three flash elements. The flash elements will need to "stretch" to fill the space.

    I’m less concerned about the flash stretching than I am about getting the text on the right div column to bottom-align. So if anyone knows how to make a two column div so that the right column’s element is bottom aligned to the respective height of the left column,n, that would be really great!

    thanks!

    sebastian.

    # August 7, 2009 at 1:48 pm

    still eager to hear if anyone has a solution for this… how can I set the bottom align of one div to the bottom align of another? i am open to using javascript, if need be, or tables [cough] if this is the only solution…?

    but currenrtly i am still hoping for a smart div/css solution.

    thanks,

    seb.

    # August 7, 2009 at 2:18 pm

    I know tables could do it… A two column table, with the right colum’s valign set to "bottom". It isn’t pretty, but would be one way of approaching it.

    # August 7, 2009 at 2:33 pm

    One other option: use a bit of javascript. This example works in Firefox, but you’d better test in other browsers since I’m not really a Javascript expert:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    dfsfsdf

    dfsfsdf

    dfsfsdf

    dfsfsdf

    dfsfsdf

    dfsfsdf

    dfsfsdf

    dfsfsdf


    This sets both left and right divs to the same height, and then positions a div inside the right div at the bottom.

    # August 7, 2009 at 3:39 pm

    I’m with falken on this one,

    Go with a javascript solution. However for the most solid results i’d just hook up jquery and let it take care of the issue.

    Code:
    $(function() {

    var height = $(“#original”).height();
    var origHeight = $(“#dynamic”).height();

    /*
    I am taking the height of the box to match, subtracting the height of the
    dynamic box, and using the value as top-padding to push the content to the
    bottom. I am also adding an extra 10 to the equation because the boxes naturally
    have 10 pixels padding, because I was being fancy and trying to make the demo look nice. -.-
    */
    $(“#dynamic”).css(“padding-top”, (height-origHeight + 10) + ‘px’)

    });

    I’ve uploaded a quick example using JQuery, (if you are unfamiliar with it that is). I’m also definately no JS/Jquery pro but this seems to be a fairly easy way to get div’s to auto match, which is going to work over pretty much every browser.

    example: http://ninjafocus.com/sandbox/jquery_ma … ights.html

    edit: quick tweak to my code, to make it bottom aligned ;p

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".