Questa è una visualizzazione utilizzando position "relative" ed utlizzando il float.
(ho colorato in modo diverso le varie "zone" in modo da poterle visualizzare a colpo d'occhio).

codice:
<html>
<style type="text/css">
#logo { position: relative; top: 2px; height: 83px; width: 504px; left: 5px; overflow: hidden; float: left; background-color: #ff0000; }
#news { position: relative; top: 2px; height: 83px; width: 223px; float: left; overflow: auto; background-color: #00ff00; }
#lato { position: relative; top: 2px; height: 83px; width: 223px; float: left; overflow: auto; background-color: #0000ff;}

#menu { position: relative; height: 352px; width: 175px; left: 5px; overflow: auto;  float: left; background-color: #ff00ff; font-size: 18px;}
#main { position: relative; height: 352px; width: 600px; float: left; overflow: auto; background-color: #00ffff;}
#spal { position: relative; height: 352px; width: 175px; float: left; overflow: auto; background-color: #ff00ff;}

#bann { position: relative; height: 64px; width: 950px; left: 5px; overflow: hidden; background-color: #ff0000;}

#bota { position: relative; height: 70px; width: 412px; left: 5px; float: left; overflow: hidden; background-color: #00ff00;}
#botb { position: relative; height: 70px; width: 126px; float: left; overflow: hidden; background-color: #0000ff;}
#botc { position: relative; height: 70px; width: 412px; float: left; overflow: hidden; background-color: #ffff00;}

#foot { position: relative; height: 30px; width: 950px; left: 5px; overflow: hidden; background-color: #ff00ff;}

</style>
<body>
<div id="cont">
<div id="logo">
logo
</div>

<div id="news">
news
</div>

<div id="lato">
lato
</div>


<div id="menu">
menu
</div>

<div id="main">
main
</div>

<div id="spal">
spal
</div>

<div id="bann">
bann
</div>

<div id="bota">
botton "A"
</div>

<div id="botb">
botton "B"
</div>

<div id="botc">
botton "C"
</div>

<div id="foot">
foot
</div>
</div>
</body>
</html>
Al riguardo vorrei avere alcune delucidazioni:
1) La larghezza (width) è sempre 950 però quando le righe sono formate da più zone (in float) esse appaiono leggermente più corte. Perché?
2) la visualizzazione è perfetta per la risoluzione 1024x768 ma se proviamo a strettire la pagina nel senso della larghezza ecco che le zone flottanti più a destra vanno a posizionarsi più sotto di dove dovrebbero. Allora ho aggiunto il container in questo modo
codice:
#cont { position: relative; top: 2px; height: 599px; width: 950px; left: 5px; overflow: auto; }
e così va bene.
Però orrore! Con Firefox le righe dei botton e il footer le mette ancora più a sinistra anziché sotto! Perché?
3) ho provato a mettere gli width in percentuali anziché in pixel e il problema n.2 sembrerebbe risolto, ma la visualizzazione con le % può dar noia a risoluzione più grandi? A risoluzioni più piccole sì ma ormai chi ha meno della 1024x768?