Come posso impedire a questi div di sovrapporsi?

Question

Ho tre div, all'interno di un div di contenuto.

Larghezza del contenitore 70%. All'interno di questo ho -Left, larghezza 20%. -Contenuto, larghezza 60%. -Right, larghezza 20%.

Vorrei contenitore per prendere il 70% della larghezza della pagina, e quelli interni (sinistra, il contenuto, e destra) per prendere in crescita del 20%, 60% e 20% del div contenitore.

Ho provato altre domande qui, ho provato Google, ma non riesco a trovare la risposta giusta. Per favore aiutami a impedir loro di sovrapporsi.

Ma quando ho ri-size il browser, la sovrapposizione div. Come questo:

Ecco il codice CSS relativo:

#container{ 
    width: 70%; 
} 
#left { 
    float: left; 
    width: 20%; 
    min-width: 200px; 
} 
#content { 
    float: left; 
    width: 60%; 
    min-width: 600px; 
} 
#right { 
    float: right; 
    width: 20%; 
    min-width: 200px; 
} 

Answer 1

Basta rimuovere lo min-width dal tuo CSS! E dare min-width al contenitore con margin: auto per renderlo centrato.

Prova questo CSS:

#container{ 
    width: 70%; 
    min-width: 1000px; 
    margin: auto; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

Partenza violino qui: http://jsfiddle.net/UaqU7/2/

Answer 2

estrarre il CSS min-width.

Una volta che la larghezza della finestra scende al di sotto di una certa dimensione, questi elementi non hanno altra scelta che la sovrapposizione. Diciamo che la tua finestra è 1000px; quindi il contenitore sarà 700 px. Ma con le larghezze min, i div nel contenitore sono già a 1000px, traboccando il contenitore.

Answer 3

È necessario estrarre lo min-width dal CSS.

Quando la pagina viene ridimensionata, min-width interrompe l'operazione di restringimento. Così causando la sovrapposizione.

Answer 4

Qui si va, se si desidera una larghezza min, impostarla sul contenitore

http://jsfiddle.net/VBSYu/1/

#container{ 
    width: 70%; 
    min-width: 1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
}​ 

Answer 5

Invece di dare m in larghezza di DIV figlio è possibile darlo a #container. Scrivi come questo:

#container{ 
    width: 70%; 
    min-width:1000px; 
} 
#left { 
    float: left; 
    width: 20%; 
} 
#content { 
    float: left; 
    width: 60%; 
} 
#right { 
    float: right; 
    width: 20%; 
} 

Scegli questa http://jsfiddle.net/yLVsb/

Answer 6

Ecco il violino il suo bel lavoro http://jsfiddle.net/r42hH/2/