I need to put a div inside a table cell and have it take up the entire height of the cell, it is either this or an all-table layout. I've been googling for a long time because I don't wan't to resort to an all-table site, any takers?
<table width="100" height="250" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" height="100%">
<div style="position:relative; background-color:#CCCCCC; min-height:100%">
content, this div needs stretch to the entire height of the table
</div>
</td>
</tr>
</table>
----
please note I don't just want the div to be 250px tall, If I add content in another column of the table that is more then 250px, I need the div layer to stretch with the table
That should work in FF but not in IE since IE doesn't support min-height/width. However, conveniently another IE inconsitency in the box model helps to work around the issue. IE will stretch/resize a <div> if it's contents are too large so min-height is just the same as height in IE, to all intents and purposes.
and it's working in FF, opera, and *gasp*, IE.. Do you know if this will work in mac (safari / IE) ?
Not sure whether it works in safari or not. I'd guess that it will do but I couldnt be 100%.
NOTE: You can get rid of underscored attribute now since you have a real height attribute after it which is overriding it in any case so it's superfluous
slighty off track so sorry for that but whats the difference between "_height" and "height"?
Thanks,
Simon
It's a fair question
To Internet Explorer, there isn't a difference. To all the other web browsers that follow standards, the underscore makes the attribute invalid and so it gets ignored.
So to firefox for example it sees something as whacky and useless as this And hence it simply does the min-height and ignores the rest