Salve a tutti,

Anche se ho un po' di esperienza con il CSS sono tre ore che mi sto dannando per risolvere un problema apparentemente semplicissimo. In pratica sto creando una pagina con header, contenuto e footer:

codice:
<head>

<title>Prova</title>

<style type="text/css">

body {
     text-align: center;
}

#container {
     margin: 0px auto 0px auto;
     width: 500px;
}

#header, #footer {
     background: #999999;
     width: 500px;
}

#main {
     background: #DDDDDD;
     height: auto;
     margin: 0px auto 0px auto;
     width: 500px;
}

</style>

</head>

<body>

<div id="container">

<div id="header">Header</div>

<div id="main">

Riga 1

Riga 2

Riga 3

</div>

<div id="footer">Footer</div>

</div>

</body>

</html>
Il problema è che all'interno del div "main", al posto di Riga 1, Riga 2 e Riga 3, devo inserire altri due div, uno a destra e uno a sinistra (per esempio uno largo 200 pixel per il menu e l'altro largo 300 per il contenuto). Ho provato in tutti i modi, ma il risultato è sempre lo stesso: il footer non tiene conto della loro altezza e rimane in cima, attaccato all'header. Ho provato con vari tipi di posizionamenti e di float, ma niente da fare.

Qualcuno sa come creare questi due div e fare in modo che il footer ne tenga conto e rimanga sotto di loro, qualunque sia la loro altezza? (non deve essere fissa ma deve dipendere dal testo inserito)

Grazie.