Full screen size?

In the coding below, I want to achieve the desktop style interface. Every user will have different screen size, so I manually set the shortcut width, then the leftover will assigned to that table.

Now the problem is, the table width can not capture all leftover of screen width, even I set the table width to 100%. Where is the bug ? I have to manually set the table width pixel, not percentage ?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
            html,body {
                width: 100%;
                height: 100%;
                border: 0;
                padding: 0;
                background:#FFFFFF;
                margin: 0;
                font-size: 12px;
                font-family: "sans-serif","Arial","Trebuchet MS", "Helvetica", "Verdana" ;      	        
            } 
     .grid{
		border:3px solid #D7E5F2;
		border-collapse:collapse;
		width:100%;
	}
	.grid_header{
		background-color: #FFEBB5;
	}
	.li_link{
		list-style-type:none;
		margin-top:3px;
		margin-left:3px;
		margin-right:3px;
		border-bottom:1px dotted blue;
	}
</style>
</head>
<body>
<div id="bodyDiv" style="margin-top:5px;padding-left:5px;border:1px solid red;">
	<div id="shortCutDiv" style="margin-right:5px;float:left;width:230px;height:500px;border-right:2px solid lightgrey;">
		<span style="font-weight:bold;font-size:12px;color:blue">Shortcuts</span>
		<ul style="margin-top:5px;margin-left:3px;padding-left:3px;">
			<li class="li_link"><a class="a_link" href="category.do?cmd=searchPage">Search Category</a></li>
			<li class="li_link"><a class="a_link" href="category.do?cmd=formPage">Create New Category</a></li>
		</ul>
	</div>
	<div style="float:left;margin-top:5px">
		<table id="category_grid" class="grid">
		<tr class="grid_header">
			<td>
				Actions
			</td>
			<td>
				ID
			</td>
			<td>
				Name
			</td>
			<td>
				Parent Category
			</td>
		</tr>
		</table>
	</div>
	<br style="clear:both">
</div>
</body>
</html>

Once you fill out those table cells, they will expand to fill the available space.

I’ve made a few tweaks to your code (rearranged divs a bit and took out some CSS) and have pasted in to text to demonstrate:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
            html,body {
                width: 100%;
                height: 100%;
                border: 0;
                padding: 0;
                background:#FFFFFF;
                margin: 0;
                font-size: 12px;
                font-family: "sans-serif","Arial","Trebuchet MS", "Helvetica", "Verdana" ;      	        
            } 
     .grid{
		border:3px solid #D7E5F2;
		border-collapse:collapse;
		
	}
	.grid_header{
		background-color: #FFEBB5;
	}
	.li_link{
		list-style-type:none;
		margin-top:3px;
		margin-left:3px;
		margin-right:3px;
		border-bottom:1px dotted blue;
	}
</style>
</head>
<body>
<div id="shortCutDiv" style="margin-right:5px;float:left;width:230px;height:500px;border-right:2px solid lightgrey;">
		<span style="font-weight:bold;font-size:12px;color:blue">Shortcuts</span>
		<ul style="margin-top:5px;margin-left:3px;padding-left:3px;">
			<li class="li_link"><a class="a_link" href="category.do?cmd=searchPage">Search Category</a></li>
			<li class="li_link"><a class="a_link" href="category.do?cmd=formPage">Create New Category</a></li>
		</ul>
	</div>
<div id="bodyDiv" style="margin-top:5px;padding-left:5px;border:1px solid red;">
	
	<div>
		<table id="category_grid" class="grid">
		<tr class="grid_header">
			<td>
				Actions
			</td>
			<td>
				ID
			</td>
			<td>
				Name
			</td>
			<td>
				Parent Category
			</td>
		</tr>
		<tr class="grid_header">
			<td>
				Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?

Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? 

O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. 

Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris. 

Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent. 
			</td>
			<td>
				Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?

Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? 

O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. 

Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris. 

Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent. 
			</td>
			<td>
				Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?

Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? 

O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. 

Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris. 

Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent. 
			</td>
			<td>
				Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?

Patere tua consilia non sentis, constrictam iam horum omnium scientia teneri coniurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? 

O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. 

Nos autem fortes viri satis facere rei publicae videmur, si istius furorem ac tela vitemus. Ad mortem te, Catilina, duci iussu consulis iam pridem oportebat, in te conferri pestem, quam tu in nos omnes iam diu machinaris. 

Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent. 
			</td>
		</tr>
		</table>
	</div>
	<br style="clear:both">
</div>
</body>
</html>