<table> multiple row height WOES - html

Question

I've searched around here and elsewhere to for a solution to this problem, but nothing I've tried has worked. The googleplex abounds with samples, but many just don't seem to fit my needs or depend heavily on tricks I can't understand.
Basically, I am trying to create a dashboard. I gave up on .css when I couldn't get things even. I have 3 rows. The most amount of columns per row is 3, and one row will be 2/3 and 1/3, and another row will be 50/50 (top row is 1/3, 1/3 and 1/3). When I couldn't get .css to have the columns even (the third 1/3 was shifting down, or off center from the rest of the row), I switched to .
When there was limited content in the tiles in the dashboard I was able to get the columns/rows distributed evenly (using width/height: 33.3%). If I resized the browser the tiles shrunk to a point where (as expected) if the window was minimized to much left/right only some of the tiles appeared. Not great - I was hoping that even if the content disappeared that I could minimize left/right as far as the browser would let me and see 3 equal columns || || || like that. But ok, no biggie.
Well, I put content in the bottom left tile (3x3 tile grid) and of course it expanded. Now I tried everything (border-collapse, white-space, overflow: hidden, etc.) and still can't get it the way I want.
I am stumped. I understand that at a certain point the browser is going to force things to overflow (lets say arbitrarily this should happen at 800x600), but I was hoping my display would shrink appropriately (tiles get smaller equally) and that the scrollbars inside the tiles would show up on the y-axis (overflow-y) so the user could scroll the text. I even tried 800x600 min/max width/height, but I couldn't get it to work.
Any advice would be appreciated.
This is my html snippet:
<div id="dashboard">
<table cellpadding="0" cellspacing="10">
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
<tr>
<td class="dashboard-tile onethird">
<div id="Alerts">
<div class="content">
<header> <span>Alerts</span> </header>
<section> Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here Content HereContent Here Content HereContent Here Content Here Content Here Content Here Content Here Content Here Content Here Content HereContent HereContent HereContent HereContent HereContent Here Content Here Content Here Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="Matters">
<div class="content">
<header> <span>Matters</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
<td class="dashboard-tile onethird">
<div id="RecentActivity">
<div class="content">
<header> <span>Recent Activity</span> </header>
<section> Content Here </section>
<footer> Link </footer>
</div>
</div>
</td>
</tr>
</table>
</div>
And this is my .css:
#dashboard { height: 100%; }
#dashboard table { height: 100%; width: 100%; border:0; margin: 0px; padding: 0; }
#dashboard table tr { height: 33.3%; }
#dashboard table td { vertical-align: top; height: 33.3%; min-width: 33.3%; min-height: 33.3%; max-width: 33.3%; max-height: 33.3%; overflow: hidden; }
#dashboard table td.onethird { width: 33.3%; }
.dashboard-tile { background-color: #650000; border: 1px solid #790000; }
.dashboard-tile .half {}
.dashboard-tile .twothird {}
.dashboard-tile .full {}
.dashboard-tile .content { margin: 5px 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; color:#fff; }
.dashboard-tile header { font-size: 1.3em; font-weight:bold; width:100%; float:left; padding: 0px 0px 5px 0px; }
.dashboard-tile header span { float: left; text-transform: uppercase; }
.dashboard-tile section { margin-top:35px; }
.dashboard-tile footer{ }
.dashboard-tile footer span { font-weight:bold; }

Answer 1

It's really not clear what you want, but I'm going to try to answer anyway.
It's fairly simple to make a fluid design with thirds and halves.
li{ width:33%; float:left;}
or alternatively,
li{ width:50%; float:left;}
Also, on a small screen, dividing text into three columns is not ideal for legibility. Consider using media queries like this:
#media screen and (max-width:600px){
li{width:100%}
}
To simplify layouts for small screens.
Here is an example of the above concepts.
EDIT:
Here is a slightly different and simplified solution:
html{height:100%;}
body{height:100%;}
div{width:33.333333%; height:33.333333%; float:left; overflow:auto;}
.twothirds{width:66.666666%;}
.half{width:50%;}
Demo