The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:

    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!



    # 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!



    # 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.



    # 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:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">










    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.

    $(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: … 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed