Dynamically resize divs in a table using CSS - html

Question

I've searched through this site and it seems that the best way to resize components dynamically is though CSS "position" and "width/height" parameters.
I have an app which partially looks like so:
It is currently being resized through Javascript ($(window).width(), $(window).height()), and I would like to do it properly though CSS.
Here is my table layout:
<table class="table">
<tr >
<td >
<div id="chartdiv1" ></div>
</td>
<td rowspan="3">
<div id="Simulation" ></div>
<div id="SimLabels" style="border: dashed; z-index: 1; width: 190px; position: relative; ">
<input type="checkbox" onchange="redrawSim()" checked="checked" id="BedMassLabel"><strong style="color: #4bb2c5;">Bed Mass (kg)</strong><br />
<input type="checkbox" onchange="redrawSim()" checked="checked" id="H2OBedLabel"><strong style="color: #EAA228;">H2O in Fluid Bed (kg)</strong><br />
<input type="checkbox" onchange="redrawSim()" checked="checked" id="BedTempLabel"><strong style="color: #c5b47f;">Temperature of Bed (C)</strong><br />
<input type="checkbox" onchange="redrawSim()" checked="checked" id="evapRateLabel"><strong style="color: #579575;">Evaporation Rate (?)</strong>
</div>
</td>
</tr>
<tr >
<td>
<div id="chartdiv2" ></div>
</td>
</tr>
<tr >
<td >
<div id="chartdiv3" ></div>
</td>
</tr>
</table>
I have tried many combinations of positions, widths and heights, but very often it seems that no matter what percentage I put down for the width/height, the layout has a mind of its own.
It should be mentioned that I am using both MVC and Twitter Bootstrap, so perhaps my html is affected by this. Could someone help me fix my html so that it replicates the design above with dynamic sizing?

Answer 1

It is better to use <div> elements rather than a table for layout purposes. Check this SO Post for the reasons behind this.
Since you are using Twitter Bootstrap, your best option is using the Bootstrap's excellent (and core feature) grid system.
Here is a quick setup using Bootstrap 2.3:
<div class="row">
<div class="span3">
<div class="row">
<div class="span12">
<div id="chartdiv1" ></div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="chartdiv2" ></div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="chartdiv3" ></div>
</div>
</div>
</div>
<div class="span9">
<div id="Simulation" ></div>
</div>
</div>
or using Bootstrap 3 RC1:
<div class="row">
<div class="col-lg-3">
<div class="row">
<div class="col-lg-12">
<div id="chartdiv1" ></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="chartdiv2" ></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="chartdiv3" ></div>
</div>
</div>
</div>
<div class="col-lg-9">
<div id="Simulation" ></div>
</div>
</div>