Margini variabili con la risoluzione e iWeb

[notexpert]

Salve.
Sto facendo la nuova homepage ad un mio sito: l'altra che avevo era con iWeb e lascia un po' a desiderare.

Tuttavia una cosa stupenda, a mio parere, è quella di centrare sempre la pagina, e di lasciare dei margini che variano con la larghezza/risoluzione dei vari schermi:

ecco qui la pagina web:

http://mathematikoi.altervista.org

Ora, io ho provato con CSS e html, a ricreare un qualcosa si simile:

http://mathematikoi.altervista.org/test901.html
http://mathematikoi.altervista.org/test902.html

Mentre nel primo caso i vari elementi... non sono centrati e rimane un margine destro orrendo,
nella seconda sono centrati, ma se la risoluzione è troppo bassa (1024 x 768) i vari elementi "cozzano" tra di loro, uno sopra l'altro.

Come faccio ad ottenere lo stesso effetto che con iWeb? Grazie

[Prill]

Inserisci tutto dentro un div cui assegni una larghezza e un margin:0 auto. Se vuoi usare posizionamenti assoluti, com'è attualmente, dai al div creato che li includerà un position:relative.

[notexpert]

Originariamente inviato da Prill
Inserisci tutto dentro un div cui assegni una larghezza e un margin:0 auto. Se vuoi usare posizionamenti assoluti, com'è attualmente, dai al div creato che li includerà un position:relative.

Grazie Prill! Ho fatto come dici, e il risultato è questo, che si avvicina a quello che dovrebbe essere:

http://mathematikoi.altervista.org/test901.html

Ora in effetti l'header si sposta, ma tutto il sito è sproporzionato verso destra e c'è un autostrada libera sulla sinistra.

Questo è il CSS

div#container{
    position: relative;
margin: 0 auto;
width: 0;
    }

div#content{
position: absolute;
    left: 200px;
top: 200px; /*l' altezza dell' header*/
    }

div#navigation{
    position: absolute;
    top: 200px; /*l' altezza dell' header*/
    left: 25px;
    width: 180px;   /*un po' di meno per evitare l' uso del padding*/
    }


p {font-family: Geneva, "Times New Roman", serif;
font-size: 14px;
color: #778899;
position: absolute;
left: 20px;
}


ev {
font-weight: 700;
color: rgb(88,76,77);
}

ul {
font-family: Geneva, Arial, serif;
font-size: small;}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	}
	ul li {
	position: relative;
	}
	li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}
	ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}
li:hover ul { display: block; }

div#extra{position: absolute; 
top: 200 px; /*l' altezza dell' header*/
left: 820 px;
width: 160px; 
width:170px; 
width:160px; 
padding: 0 0 10 % 0;
}

div#extra { border-top: medium double blue; }
div#extra { border-right: medium double blue; }
div#extra { border-left: medium double blue; }
div#extra { border-bottom: medium double blue; }

Puoi aiutarmi?