fill empty space with <div>, <td>, anything?

[NickNameDrive]

Not sure anymore if there's a way to do it. Need help??

Need to fill empty space from bottom up!

<div height 100%>

<div header height 100px></div>

<table>
<tr>
<td id="area 1">

:)
<div>content of this area sometimes a bit longer than one of area 2</div>

<div? table? td?> is it possible to have something here that will fill empty area from bottom up</something>

</td>
<td id="area 2">

:)
<div>content of this area is often longer than one of area 1</div>

<div? table? td?> is it possible to have something here that will fill empty area from bottom up</something>

</td>
</tr>
</table>

</div>

<div footer margin-top:-20px;></div>


<td>s obviously have equal heights in this case and one will stretch to match the other, but i need to alter their backgounds with different colors. So i need to place some element under those <div>s inside content area that will take up left space, without creating scroll bar.

I got "sort of slution" but it involves creating content of area 1 outside the <table> and then dragging <table> up using z-index to place under that content, as content of area 2 is often longer, that gives some fix with pixel adjustment where needed.

100% height doesn't seem to work much in this case, maybe to do with parent/child elements, don't know...

Is there a universal cross browser solution for this (ie6 not needed, but ie7 is a must)?

P.S. Can use different elements, doesn't have to be <table>s or <div>s, can use separate stylesheets, no problem. Idea is: two collumns and what was described above. Thanks to everyone!

[NickNameDrive]

If anyone looking here...

I should mention that it is transparency/none-transparency that i need to acheive. IE will work with position:relative but others will apply parent element property, so no choice. But if I could stretch something from bottom up, i can achieve transparency, yet keep text above none-transparent. And keep both collumns verticaly liquid.

[zip222]

Sounds like you might need to use the faux column technique. take a look at this article:
http://www.alistapart.com/articles/fauxcolumns/

[NickNameDrive]

Thanks zip222, but that won't do. I have none transparent element on top of transparent, or so the illusion of it with <div> floats and/or <td>. Yet to feel space under it in order to create vertically liquid columns seems to be imposible as there's no element and/or property that will stretch bottom up to fill space, at least I haven't found one yet. <TD> support for 100% height is not browser universal and the rest don't even come close.

It seems unless you use z-index and px size in one column to match another, nothing else will do...

I keep looking... if anyone know how to, please suggest.

[BLiZZaRD]

You need to set a min-height in your CSS. usually a min-height:100% will work as long as the container div has some content.

[NickNameDrive]

Thanks! Tried, failed on browser support. They also tend to extend the height to page's height which is 100% + content height, creating scroll and lots of empty space, i'm using steaky footer in there, that's why page and <div> are 100%. I think that I just have a very tall order here. Though shame there's no simple way around it. The more I learn htmls/css and browser support the more frastrated I get :mad:. By now i hate MS, and the rest as well, for not adopting one standard and simple way of coding pages!