Float che va a capo

[rainst]

Sto imparando a fare un sito web molto semplice usando un layout a div, composto da titolo, menù verticale a sinistra, contenuto pagina e footer, una cosa davvero molto semplice:

<div container>   Ha impostato come larghezza minima 800px
    <div titolo>...</div>
    <div menu>...</div>            NB: menu ha largheza fissa pari a 150 px, contenuti e 
    <div contenuti>...</div>            menu hanno impostato float:left
    <div foot>...</div>
</div>

Il problema è banalissimo, come dicevo voglio che il menù sia in verticale a sinistra dei contenuti, solo che quando questi ultimi superano in altezza il menù il div dei contenuti va a capo, come posso fare per rimediare senza usare per forza posizionamenti relativi? Sono un paio di giorni oramai che sto leggendo guide e a sparando proprietà a caso (display, clear) ma non ne sono ancora venuto fuori...

il sito è a questo indirizzo: http://aldebaransailing.altervista.org

[Mich_]

E` difficile capire il codice CSS come lo hai scritto: prova a risistemare curando l'organizzazione dei contenuti: una riga per ogni dichiarazione, usare le indentazioni ecc.

Mi pare di vedere errori di sintassi, per cui ti consiglio di passare dai validatori: validatore HTML e validatore CSS

Ultima considerazione: mescoli misure in em e misure in px: a seconda della dimensione del font, avrai risultati diversi, e questo puo` portare a misure che eccedono lo spazio disponibile.

[rainst]

l'html che ho scritto è solo d'esempio, so bene che non è rigoroso, quello che ho scritto per la pagina web è corretto e rispetta il DTD xhtml strict

Comunque ieri sera ho trovato una soluzione provvisoria, che ha la pecca di non dare fluidità alla pagina durante i ridimensionamenti, ecco i css impostati:

div container width:80% min-width:900px margin:auto
div menu float:left width:120px
div corpo float:left max-width:710px

e riecco la struttura della pagina semplificata:

<div container>   Ha impostato come larghezza minima 800px
    <div titolo>...</div>
    <div menu>...</div>            NB: menu ha largheza fissa pari a 150 px, contenuti e 
    <div contenuti>...</div>            menu hanno impostato float:left
    <div foot>...</div>
</div>

Al momento però come ho già detto la pagina manca di fluidità: solo titolo e foot sono in grado di espandersi a loro piacimento (fino all'80% della pagina e cmq mai sotto i 900 px). Però io voglio che anche il corpo abbia la possibilità di riempire quanta più pagina possibile rimanendo nei vincoli dettati dal container...

Per esempio, trascurando margin, padding e bordi se ho la pagina larga 2000px il container si disporrà in centro occupandone 1600, il logo si centrerà sui quei 1600. Quindi arriva il menù in float che occuperà i primi 120 e i restanti 1600-120= 1480px vorrei che fossero interamente occupati dal div corpo (so che sono uno sproposito, ma è un esempio). Invece il corpo si espande di 1600px e va a capo perchè non ci sta!

quindi al momento ho limitato il corpo a 710px di larghezza massima per limitarlo nell'espansione in modo da farlo rimanere nella stessa riga del menù

posso ottenere quello che voglio senza inserire script che mi calcolano la larghezza massima del corpo?
l'indirizzo è sempre il solito: http://aldebaransailing.altervista.org/