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 co

Answer 1

You need to take out the min-width from your CSS.

When the page is sized smaller the min-width stops it from shrinking any further. Thus causing the overlap.

Answer 2

Here you go, if you want a min width, set it on the container

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 3

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 4

Here is the fiddle its working fine http://jsfiddle.net/r42hH/2/

Answer 5

Take out the min-width CSS.

Once the window width gets below a certain size, those elements have no choice but to overlap. Let's say your window is 1000px; then the container will be 700px. But with the min widths, the divs in the container are already at 1000px, overflowing the container.

Answer 6

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/