How to disconnect these divs from overlapping?

Question

I have three divs within the contents of a div.

The width of the container is 70%. In this I -Left, width 20%. - Content, width 60%. - Large, 20% wide.

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

I tried other questions here, I tried Google, but cannot find the correct answer. Please help me stop them from overlapping.

But when I resize the browser, divs overlap. Like this:

Here is the relevant CSS:

#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 min-width from your CSS! And give min-width container with margin: auto to make it the 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 the fiddle here: http://jsfiddle.net/UaqU7/2/

Answer 2

Take out the min-width CSS.

When the window width falls below a certain size, these elements have no choice but to overlap. Say your window is 1000px; then the container will be 700px. But with a minimum width of divs in the container already at 1000px, overflowing the container.

Answer 3

You need to take min-width out of your CSS.

When the page size is smaller, min-width stops it from further reducing. Thus, overlap occurs.

Answer 4

Here you go, if you want a minimum width, set it in 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 5

Instead of giving the minimum width of the child DIV, you can pass 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 out http://jsfiddle.net/yLVsb/

Answer 6

Here is a fiddle of its working quality http://jsfiddle.net/r42hH/2/