¿Cómo evito que estos divs se superpongan?

Question

Tengo tres divs, dentro de un div de contenido.

Ancho del envase 70%. Dentro de eso tengo -Izquierda, ancho 20%. -Contenido, ancho 60%. - Derecho, ancho 20%.

Me gustaría que el contenedor ocupe el 70% del ancho de la página, y el interior (izquierda, contenido y derecha) ocupe el 20%, 60% y 20% del contenedor div.

He intentado otras preguntas aquí, probé Google, pero parece que no puedo encontrar la respuesta correcta. Por favor, ayúdame a evitar que se superpongan.

Pero cuando cambia el tamaño del navegador, la superposición divs. De esta manera:

Aquí está el código CSS relevante:

#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

¡Simplemente elimine el min-width de su CSS! Y dé min-width al contenedor con margin: auto para hacerlo central.

Pruebe este CSS:

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

Salida violín aquí: http://jsfiddle.net/UaqU7/2/

Answer 2

sacar la CSS min-width.

Una vez que el ancho de la ventana es inferior a un cierto tamaño, esos elementos no tienen más remedio que solaparse. Digamos que su ventana es 1000px; entonces el contenedor será 700px. Pero con los anchos mínimos, los divs en el contenedor ya están en 1000px, desbordando el contenedor.

Answer 3

Necesita sacar el min-width de su CSS.

Cuando la página tiene un tamaño más pequeño, el min-width evita que se encoja. Por lo tanto, causando la superposición.

Answer 4

Aquí tienes, si quieres un ancho mínimo, lo puso en el recipiente

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

En lugar de dar m en ancho de DIV hijo puede darle a #container. Escribe así:

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

Marque esta http://jsfiddle.net/yLVsb/

Answer 6

Aquí es el violín su funcionamiento muy bien http://jsfiddle.net/r42hH/2/