Ciao ragazzi, devo implementare un layout a 3 righe come nell'immagine sottostante:

La differenza con un semplice layout a 3 colonne e' che le 2 celle ai bordi devono "invadere" quella centrale di un tot numero di pixel... come nell'immagine in figura... come posso fare?



Diciamo che il codice di prova della pagina e' questo, ma non funziona credo di dover impostare qualcosa tipo position e display sui div ma non so cosa:

codice:
<html>
	<head>
		<title>PAGINA</title>
		<style media="screen" type="text/css">
			html,body,#container,#content { height:100%; width:100%; border:0; padding:0; margin:0; text-align:center; }
			#header { top:16px; }
			#footer { bottom:12px; }
		</style>
	</head>
	<body>
		<div id="container">
		<table id="content" cellpadding="0" cellspacing="0">
			<tr>
				<td id="header">
					varia roba grafica con png a 24bit
				</td>
			</tr>
			<tr>
				<td height="100%">
					contenuto della pagina
				</td>
			</tr>
			<tr>
				<td id="footer">
					varia roba grafica con png a 24bit
				</td>
			</tr>
		</table>
	</body>
</html>