Hi. I have a setup that looks like this:
<html><head><style>
table{
height:100%;
width:100%;
padding:0 20px 20px 20px;
min-height:540px;
min-width:720px;
}
tr.head{
height:35px;
background:black;
}
td.left-bar{
background-color:green;
width:220px;
}
td.spacer{
width:10px;
}
td.right-bar{
background-color:blue;
}
div.sb-top{
height:20px;
background-color:red;
}
div.sb-bottom{
height:100%;
background-color:yellow;
padding:10px;
}
</style></head><body>
<table>
<tr class="head"><td colspan='3'></tr>
<tr>
<td class="left-bar"><div class="sb-top"></div><div class="sb-bottom"></div></td>
<td class="spacer"></td><td class="right-bar"></td>
</tr>
</table>
</body></html>
However, when I do this both the height and padding on sb_bottom cause it to overflow past the cell. I'm not so concerned about the right/left overflow, but I absolutely must fix the bottom overflow. How can I do this? Thank you!