Como faço para impedir que essas divs se sobreponham?

Eu tenho três divs, dentro de um conteúdo div.

Largura do contêiner 70%. Dentro disso eu tenho -Esquerda, largura 20%. -Conteúdo, largura 60%. -Right, largura 20%.

Gostaria que o contêiner ocupasse 70% da largura da página e os internos (esquerda, conteúdo e direita) para ocupar 20%, 60% e 20% do contêiner div.

Eu tentei outras perguntas aqui, tentei o Google, mas não consigo encontrar a resposta certa. Por favor me ajude a impedi-los de se sobrepor.

Mas quando eu redimensiono o navegador, os divs se sobrepõem. Como isso:

Aqui está o 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;
}

questionAnswers(6)

yourAnswerToTheQuestion