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.
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!
but currenrtly i am still hoping for a smart div/css solution.
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.