- This topic is empty.
August 3, 2009 at 8:50 pm #25644
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!
Sebastian.August 4, 2009 at 2:25 am #61733TheDocMember
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 #61761
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!
sebastian.August 7, 2009 at 1:48 pm #61835
but currenrtly i am still hoping for a smart div/css solution.
seb.August 7, 2009 at 2:18 pm #61836falkencreativeMember
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 #61839falkencreativeMember
dfsfsdfright 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.August 7, 2009 at 3:39 pm #61848greg.mcauslandMember
I’m with falken on this one,
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
- The forum ‘CSS’ is closed to new topics and replies.