Ciao a tutti =) Sto impazzendo con un problema relativamente semplice, spero che qualcuno abbia una soluzione =)

Ho cercato di semplificare il codice il piu' possibile, spero sia leggibile.
Il problema e' il seguente. La tabella ignora completamente le dimensioni del div in cui e' contenuta, "fuoriuscendo" da destra.

Inserendo nella tabella "margin-left:200px" le dimensioni tornano corrette. Ma non posso farlo perche' sto utilizzando scriptaculous per nascondere il div a sinistra. Quindi mettendo il margin, la tabella giustamente non si ridimensiona. Non posso neppure mettere le dimensioni in px, perche' dovra' girare su una finestra ridimensionabile (in Air)...
Come faccio? E' possibile dirgli "rimani all'interno di quel div, occupalo tutto, smettila di sforare"? =)

Vi posto un codice il piu' ridotto possibile, spero possa essere d'aiuto...

Grazie mille,
Francesco

codice:
<html>  
<head>  
<script type="text/javascript" src="./lib/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="./lib/scriptaculous/scriptaculous.js?load=effects"></script>
</head>  
<body>  
<div id="left" style="background:#dee4ed;float:left;width:200px;height:100%;border-right:2px;border-right-style:groove;border-right-color:#AAA;">
<h3>Menu</h3>
</div>
<div>
<div style="height:100%;">
	<div id="center">
<table style="width:100%;border-collapse:collapse;font-size:12px;">
		<thead>
			<tr>
				<th style="border:1px solid #aaa;">Index</th>
				<th style="border:1px solid #aaa;">Numeric</th>
				<th style="border:1px solid #aaa;">Text</th>
				<th style="border:1px solid #aaa;">Currency</th>
				<th style="border:1px solid #aaa;">Date</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>6</td>
				<td>789.2</td>
				<td>Jake</td>
				<td>$70.94</td>
				<td>2012-03-13</td>
			</tr>
		</tbody>
		</table>
	</div>
</div>
<div id="bottom_area">
	Hide
</div>
</body>  
</html>