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;
}
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/
OTHER TIPS
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.
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/
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.
Here is the fiddle its working fine http://jsfiddle.net/r42hH/2/
Here you go, if you want a min width, set it on the container
#container{
width: 70%;
min-width: 1000px;
}
#left {
float: left;
width: 20%;
}
#content {
float: left;
width: 60%;
}
#right {
float: right;
width: 20%;
}