Currently I’m working on two table columns next to eachother, which contents must be of equal height. Sounds classic, however, the table/row/cells can’t be given a fixed height, because it will be different every time.
I’ve simplified the case to this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<table cellspacing="0" cellpadding="0" style="width: 500px; border: 2px solid blue;">
<tr>
<td style="height: 100%;"><div style="height: 100%; background-color: yellow;">left<br />left<br />left<br />left<br />left</div></td>
<td style="height: 100%;"><div style="margin-left: 20px; height: 100%; background-color: yellow;">right</div></td>
</tr>
</table>
</body>
</html>
So I’d like the yellow blocks to be of equal height, without giving table/row/cell/div a fixed width (relative is fine). I know the table cells can be given a yellow background, but this is a simplified example of blocks that can me minimized, moved, etc., so giving table cells a color is not an option. Use of tables is not necessary, but thought it would be better to illustrate this case.
Thanks for replies!
I’m not sure I understand your problem exactly but – you are giving a height of 100% to the div and it’s parent also has 100% – but obviously this won’t work since the div and also td has no relative from which to calculate those 100%.
As a solution you could try doing it with faux columns. A list apart has a nice article about it http://www.alistapart.com/articles/fauxcolumns/ .