expand <div> height to fill <td> / vertically align <div> to bottom

After an upgrade to Firefox 1.5 one of my page layouts broke. I would think this would be a simple solution but I have now spent far too much time on this.

Here is an example:


Example #1:
My intent is to get div#wrapper to extend its height to completely fill the <td> that it is contained in. Then, have #top-box vertically aligned to the top and #bottom-box vertically aligned to the bottom of #wrapper.

Example #2:
Instead of trying to stretch a <div> height to fill the <td>, I have removed the div#wrapper, and instead applying the styling to the <td>. Here all I'm trying to do, is vertically align #top-box to the top, and #bottom-box to the bottom.

The end result I am looking for would have the space between these two boxes expand based on the content in the right hand <td>. I am not having any luck. I had this working before the release of Firefox 1.5, but now something has changed.
PLEASE HELP!

thanks,
infekt

 

Try this.

For your bottom div:

<div style="position:  absolute;  bottom:  0;"> (replace 0 with the number of pixels from the bottom you want it.

Code (markup):

Never tried it before, but it should work.

 

How about this:

td {position:relative;}
#wrapper {position:absolute;top:0;left:0;width:100%;height:100%}

HTML:

The same problem is kind of universal as you have a content column which is constantly being pushed longer as the content inside grows and the sidebar column is not adjusting itself as the one containing content does. You want them to be the same in height. Right?

One of the reasons for this might be that you need a stretching background for the sidebar which is the #wrapper in your case. You might need the background to be at the bottom of the #wrapper. If it is in this case, just set the background on table, that is, the container of the sidebar and content and position it left bottom.