Dunque sto facendo diverse prove su un layout float di base, in quanto mi sto avvicinando al layouting 100% tablefree (così posso tirarmela con amici e colleghi :P) ma zoppico su una questione credo abbastanza basilare. Prima di tutto ecco qui il mio codicillo:

codice:
//STILE

* {
padding:0;
margin:0;
}

html {height:100%;}
body {height:100%;}
div#Container {height:100%;}
div#Header {height:140px;}
div#Body {height:100%;}
div#Footer {height:60px;}

//HTML

<body>
<div id="Container">
	<div id="Header">
		<h1>Header</h1>
	</div>
	<div id="Body">
		Loren Ipsum
	</div>
	<div id="Footer">
		<h3>Footer</h3>
	</div>
</div>
</body>
Il problema consiste nel fatto che il div "Body" è si al 100% della pagina, ma non mi tiene conto delle dimensioni di header e footer, quindi la dimensione totale è di 100% della schermata + altezza header + altezza footer.

Quello che vorrei ottenere è quello che nei tempi passati si otteneva con

codice:
<body>
<table height=100%>
 <tr>
  <td height=140></td>
 </tr>
 <tr>
  <td height=100%></td>
 </tr>
 <tr>
  <td height=60></td>
 </tr>
</table>
</body>
il codice l'ho buttato giù alla veloce ma di sicuro capirete il concetto

inoltre sono alla ricerca di qualche buon articolo di referenza per rendere il mio codice CSS cross-browser, e per ora non ho trovato nulla di valido: consigli?