Salve a tutti,

innanzitutto, essendo il mio primo post mi presento: non sono un professionista del settore ma per diletto ho deciso di incamminarmi nel lungo e tortuoso cammino che idealmente dovrebbe portarmi attraverso HTML, CSS e JavaScript. Se le forze e le capacità lo permetteranno mi addentrerò anche in JQuery e PHP, ma penso che già i primi tre diano abbastanza carne al fuoco.

E infatti, comincio subito con l'esporre i miei problemi.
Recandovi a questo indirizzo troverete la mia pagina di prova. Vi prego di sorvolare sul fattore estetico: è, per l'appunto, una semplice pagina per esperimenti. In calce al presente messaggio riporterò i codici HTML e CSS.

Cliccando nel link a destra dell'immagine, aprirete una pagina in cui (in maniera molto spartana) è indicata la struttura che vorrei dare alla homepage (per semplicità riporto il link).

Già nella sezione header ho riscontrato i primi problemi. Infatti anche se in apparenza tutto sembrerebbe funzionare alla perfezione a tuttoschermo (o perlomeno sul mio monitor 1366x768), non appena andiamo a ridimensionare la pagina del browser, gli elementi se ne vanno un pochino per i fatti loro.

Il mio quesito è dunque:
-come posso fissare gli elementi di modo che mantengano la posizione anche ridimensionando il browser?

Ovviamente accetterò ben volentieri qualsiasi suggerimento o critica non specifica con il mio problema.

Grazie di tutto. Di seguito, i codici HTML e CSS

HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagina di prova</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="container">
<div id="header">
<div id="sezioneSXh">[img]ken.jpg[/img]</div>
<div id="sezioneDXh">Collegamento immagine struttura del sito</div>
</div>
<div id="topmenu">Topmenu orizzontale sotto header</div>
<div id="content">
<div id="sezioneSXc">Contenuto pagina sinistra</div>
<div id="sezioneCc">Contenuto pagina centro</div>
<div id="sezioneDXc">Contenuto pagina destra</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
CSS
codice:
body { background-color: Lime; } 
#container { background-color: Aqua; 
                  width: 60%; 
                  margin: auto; 
                  padding: 10px; } 
#header { background-color: Blue; 
               padding: 10px; 
               height: 150px; } 
#sezioneSXh { background-color: Fuchsia; 
                     width: 150px; 
                     height: 150px; 
                     float: left; } 
#sezioneDXh { background-color: Gray;
                     float: right;
                     height: 150px; 
                     width: 630px; }