Evitare l'overflow orizzontale di una <div> annidata

[Hil]

Ciao a tutti! Sto scrivendo l'intestazione di una pagina web. L'intestazione consiste in due <div> e da una lista[*] inline. Il problema che devo affrontare riguarda l'overflow della <div> annidata, causato dal ridimensionamento della finestra del web browser. Esiste un modo per evitare che la <div> annidata fuoriesca dalla <div> principale?

La struttura della pagina HTML è la seguente:

<div id="header">
    <div class="menu">
        <ul>[*]Elemento 1[*]Elemento 2[*]Elemento 3[*]Elemento 4[*]Elemento 5[/list]
    </div>
</div>

Mentre il codice CSS relativo è:

li {
    display: inline;
}

#header {
    background: #333333;
    border: 2px solid #ff0000;
}

#menu {
    height: 60px;
    text-align: center;
    margin: 0 auto;
    width: 500px;
    position: relative;
    border: 2px solid #0000ff;
}

Quando la larghezza della finestra del web browser si riduce ad una dimensione inferiore della <div id="menu">, quest'ultima straborda.





Grazie in anticipo!

[0-c00l]

A cosa ti serve position:relative? Comunque per non far apparire la barra di scorrimento devi aggiungere nel css:

overflow: hidden;

[mucu]

ma nascondere il menù non mi sembra una grande idea
meglio dare a header overflow: auto

[0-c00l]

Originariamente inviato da mucu
ma nascondere il menù non mi sembra una grande idea
meglio dare a header overflow: auto

Vedere una barra di scorrimento in menù è ancora meno bello di non vedere il menù..

[Hil]

Innanzitutto, grazie per le risposte!

Originariamente inviato da 0-c00l
A cosa ti serve position:relative? Comunque per non far apparire la barra di scorrimento devi aggiungere nel css:

overflow: hidden;

Ma "overflow: hidden;" elimina tutto quello che esce dalla <div> principale, ma in questo modo chi avrà uno schermo con una risoluzione minima non potrà vedere parte del sito. Esiste un modo per evitare completamente l'overflow? Ho sentito parlare del clearfix ( clear: both; ) però quest'ultimo sembra risolva l'overflow verticale di elementi flottanti. Un modo simile per il mio caso esiste?

P.S: La proprietà "position: relative" è un residuo delle mie vecchie prove.

Originariamente inviato da mucu
ma nascondere il menù non mi sembra una grande idea
meglio dare a header overflow: auto

In questo modo, avrò sì una barra di scorrimento, ma nell'header e non nell'intera pagina. Quindi se avessi degli overflow anche in altre parti, con "overflow: auto;" comparirebbero una moltitudine di scroll bar. Se una barra di scorrimento deve essere la soluzione, vorrei averne una sola in fondo alla pagina e non una per ogni <div id="contenitore">.

Altri possibili metodi? Questo problema fa scervellare!

[mucu]

a parte che non stiamo parlando di bello e brutto
ma di nascondere una parte fondamentale del sito come il menu di navigazione
mi chiedo chi visiterà il sito con una finestra di 200px?
e poi la pagina non ha delle dimensioni minime?
insomma mancano tanti fattori per scegliere una soluzione
intanto elimina le dimensioni del menu

[Hil]

Originariamente inviato da mucu
a parte che non stiamo parlando di bello e brutto
ma di nascondere una parte fondamentale del sito come il menu di navigazione
mi chiedo chi visiterà il sito con una finestra di 200px?
e poi la pagina non ha delle dimensioni minime?
insomma mancano tanti fattori per scegliere una soluzione
intanto elimina le dimensioni del menu

Premetto che il sito tratterà di grafica tridimensionale, quindi la pagina deve esser sia esteticamente appagante sia funzionale. Sto trovando molta difficoltà nel far coesistere questi due aspetti. La <div id="menu"> dovrebbe avere dimensione fissa di 1000 pixels ed essere centrata, mentre la <div id="header"> dovrebbe estendersi in lunghezza su tutta la finestra del browser. L'ideale sarebbe contenere il menu nell'header e avere un'unica scroll bar dell'intera pagina.

PS: Perché dovrei eliminare le dimensioni del menù?

[mucu]

ma se lo vuoi di 1000px perchè scrivi 500px e fai le prove a 200px?
mettti 1000
margin 0 auto gia ce l'hai
usi un doctype xhtml strict e parti da questo

[Hil]

Originariamente inviato da mucu
ma se lo vuoi di 1000px perchè scrivi 500px e fai le prove a 200px?
mettti 1000
margin 0 auto gia ce l'hai
usi un doctype xhtml strict e parti da questo

Ho usato 500px perché quello che ho scritto sul forum è solo un esempio che vuol mostrare il problema in modo generico. Non credo cambi in base al valore della lunghezza, infatti avrò ugualmente l'indesiderato overflow. Come linguaggi sto usando HTML5 con i CSS3.

[mucu]

allora studiati le media queries in maniera da poter adattare il sito
oppure cerca una soluzione in javascript che modifichi il css in base alle risoluzioni