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

[schedal]

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.

[TheDoc]

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.

[schedal]

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.

[schedal]

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.

[falkencreative]

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.

[falkencreative]

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:

dfsfsdf

dfsfsdf

dfsfsdf

dfsfsdf

dfsfsdf

dfsfsdf

dfsfsdf

dfsfsdf

right contentsdfadf asdfa fda dfa fdasfdsafafdad fda dfa dfa f

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

[greg.mcausland]

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

[Author]

Posts