La cosa non e` difficile. Basta partire dall'esterno.
Do ai vari blocchi i nomi secono una logica possibile, ma potrebbe non essere quella da te usata (io non conosco i contnuti dei vari blocchi). all'interno segno i colori da te usati (come li vedo io, che forse e` diverso da come li vedi tu).
codice:
<body>
<div id="header">
blu</p>
</div>
<div id="menu">
verde</p>
<ul>[*]primo link[*]...[/list]
</div>
<div id="ausiliario">
<div id="intest">
arancio</p>
</div>
<div id="mezzo">
verdino</p>
</div>
<div id="fondo">
rosso</p>
</div>
</div>
<div id="principale">
giallo</p>
</div>
</body>
CSS:
#html, body {
width: 100%;
height: 100%;
font-size: 100%;
}
#header {
width: 100%;
height: 10%;
background: Blue;
}
#menu {
width: 12%;
float: left;
top: 10%; /* uguale ad altezza header */
bottom: 0;
}
#ausiliario {
width: 30%;
top: 10%; /* uguale ad altezza header */
bottom: 0;
float: right;
}
#intest {
width: 100%;
height: 20%;
background: Orange;
}
#mezzo {
widht: 100%
scroll: auto;
background: lightGreen;
}
#fondo {
width: 100%;
height: 30%;
bottom: 0;
background: Red;
}
#principale {
top: 10%; /* uguale ad altezza header */
bottom: 0;
background: Yellow;
scroll: auto;
}
E` possibile che abbia dimenticato qualche cosa o che ci siano errori di sintassi.
Per evitare tutti i top 10% e` anche possibile inserire tutta la parte escluso #headeer dentro un blocco, cui darai solo width:100%; bottom:0;