How do I stop these divs from overlapping?

css, html

Solution

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/

Problem

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

Original source