¿Cómo puedo evitar que estos divs se superpongan?

Tengo tres divs, dentro de un div contenido.

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

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

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

Pero cuando redimensiono el navegador, los divs se superponen. Me gusta esto:

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;
}

Respuestas a la pregunta(6)

Su respuesta a la pregunta