Un paio di domande sui CSS e il posizionamento dei Div.
Li sto studiando da ieri quindi perdonatemi eventuali sviste o ignoranze.

Sto cercando di capire come creare layout fluidi, in modo che restino tali anche ridimensionando il browser o cambiando risoluzione.

1) I problemi principali sono quando dei div che ho impostato con float:left e dei quali ho specificato le dimensioni in percentuale (tipo width:20%), se ridimensiono la finestra questi fanno lo stesso fino ad un certo punto, e poi quello più a destra cade giù e va a capo.

2) Altro problema è quando appunto specifico delle dimensioni in percentuale e queste non tornano.
Per esempio ho un div Main largo il 90% della pagina, contenente un div Banner largo il 100% (del Main), e sotto due div affiancati, la cui somma delle larghezze (sempre in percentuale) teoricamente dovrebbe fare 100.
Invece di tornare ed essere larghi uguali, uno dei due div sotto mi vanno a capo perchè troppo grandi, quando invece, teoricamente, sommati dovrebbero occupare lo stesso spazio del div Banner sopra.
Ho provato a togliere anche i bordi, per vedere se quelli venivano visti 'in più' alla larghezza indicata, ma non ho risolto.

I due problemi riguardano il codice qua sotto (è un esempio preso da HTML.it):
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova</title>
</head>

<style type="text/css">
body {
margin:0;
background-color:#EEEEEE;
color: #000000;
}
div {
font: normal 10px Verdana;
}
#Main {
width: 90%;
}
#Top {
text-align:left;
background-color:#000000;
color: #FFFFFF;
font-weight:bold;
padding: 3px;
border: solid 1px #000000;
}
#Logo
{
    text-align: Left;
    background-color: #FFCC00;
    float: Left; 
	margin-rigth: auto;
    width: 35%;
    padding: 25px;
    border-left: Solid 1px #000000;
}
#Ricerca {
text-align:center;
background-color: #FFCC00;
width: 58%;
margin-left: auto;
border-right: Solid 1px #000000;
padding: 25px;
}
#Menu_oriz {
text-align:left;
background-color: #336699;
color: #FFFFFF;
font-weight:bold;
padding: 3px;
border: solid 1px #000000;
}
#Menu_sx, #Menu_dx {
background-color: #FFCC00;
float:left;
width: 20%;
padding: 3px;
border-bottom: solid 1px #000000;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
}
#Corpo {
background-color:#FFFFFF;
width: 58%;
padding: 3px;
float: left;
border-bottom: solid 1px #000000;
}
</style>

<body>
<div align="center">
<div id="Main">
	<div id="Top">... Benvenuto ...</div>
	<div id="Logo">Immagine</div>
	<div id="Ricerca"> Cerca </div>
	<div id="Menu_oriz">Menu</div>
	<div id="Menu_sx">Menu di sinistra</div>
	<div id="Corpo">Corpo della pagina</div>
	<div id="Menu_dx">Menu di destra</div>
</div>
</div>
</body>
</html>


3) Semplice domanda niubba: i riferimenti tra div in base a cosa vanno?
Mi spiego meglio: se metto due div accanto o uno sopra l'altro, il secondo da dove viene iniziato a 'disegnare'. Attacca l'angolo destro in basso del primo a quello sinistro alto del secondo? O altro?

4) Ho infine una prova dove ho un problema che non mi spiego.
Ho un layout con un box contenitore e 3 box messi in colonna uno sopra l'altro (un banner, un menu e un corpo).
Vorrei però lasciare 30 pixel di margin in basso tra il corpo e il box contenitore.
Ma se imposto margin-bottom: 30px nel CSS questo non fa niente (anche se in Dreamweaver si vede correttamente).
Se invece aggiungo anche solo un pixel di padding-bottom al box contenitore allora magicamente mi vengono mostrati anche i 30 pixel di margin del corpo.

Non riesco proprio a spiegarmi questo comportamento



Sarei felice se poteste rispondere a queste domande

Grazie a tutti!!