Div won't fill height of Td

[Perfect Member Name]

I have a very simple html table, one TD with very little content, the other TD with a lot of content. I want a div in the "little content" side to fill the extra height created by the "lot of content" side. Sounds easy, right?

<table width="100%">
<tr>
<td valign="top">
this is some text on a white bg.<br>
<div style="height: 100%; background-color: #0000FF;">
this is some text on a blue background.
</div>
</td>
<td valign="top">
a lot of content goes here... so much that i won't even write it, but just imagine enough content that this TD will be taller than the first TD.
</td>
</tr>
</table>

Now, the problem is that the blue div stops as soon as the content within it stops. I need to find a way to get it to fill the entire height of the TD that contains it.

For most browsers, setting the TABLE tag with height: 0%; seems to do it - but not for Safari on Mac (which is a browser that I'm trying to design for). I also thought that it may have to do with the second, taller TD being drawn after the height was determined for the DIV. I wrote a simple script to set the height of the DIV to 100% after everything had loaded - but saw the same problem.

Thanks for taking the time to read this, and hopefully someone will be able to point out whatever I'm missing.

[/code]

[tedster]

Assign the background-color to the <td> instead of the <div> and give the div a background-color of transparent.

The div actually stops wherever it did before, but the visual appreance should be what you want.

[Perfect Member Name]

That isn't the visual apearance that I want actually. I need part the first part of the left side to be white, and the bottom part to be blue.

And to be a little more specific, I need to set a top and right border on the blue div, so I can't just make the TD blue with borders and use a white div at the top (because the white div wouldn't overlap the border of the TD).

[tedster]

Maybe try two <td>'s on the left and one on the right with rowspan="2", rather than trying to use a div inside the <td>. I'm pretty sure you won't get the div to expand in height beyond its content.

[Small Website Guy]

DIVs only fill out horizontally, not vertically. You can give a DIV a fixed height (such as 100px), but variable heights are ignored.

Set the TD's background to blue, then make a div on the top that has a white background. That way you'll get white on the top and blue below.