How do I stop these divs from overlapping?

Question

I have three divs, within a content div.

Container width 70%. Within that I have -Left, width 20%. -Content, width 60%. -Right, width 20%.

I would like container to take up 70% of the page's width, and the inner ones (left, content, and right) to take up 20%, 60% and 20% of the container div.

I have tried other questions on here, I have tried Google, but can't seem to find the right answer. Please help me stop them from overlapping.

But when I re-size the browser, the divs overlap. Like this:

Here's the relevant CSS code:

#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

Just remove the min-width from your CSS! And give min-width to the container with margin: auto to make it center.

Try this CSS:

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

Check out fiddle here: http://jsfiddle.net/UaqU7/2/

Answer 2

Instead of giving min-width of child DIV's you can give it to #container. Write like this:

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

Check this http://jsfiddle.net/yLVsb/