I have 2 divs which float side by side, ex:
<div id="1"></div> <div id="2"></div>
css
#1 {float: left} #2 {float:right}
but when i resize the browser size, it become overlap each other. How to make it not overlap?
Set a min-width on the containing element. Try out with the below example code:
#container{ width: 70%; min-width: 1000px; margin: auto; } #left { float: left; width: 20%; } #content { float: left; width: 60%; } #right { float: right; width: 20%; }
Hope this helps.
Floating divs will not overlap unless there is an error in your code. Have you validated it? If so, and if there are no errors reported, we really need to see your code.
However, as a guess, I'd suggest: try making both divs float left.