How to stop elements from overlapping?

On a page I have created, when the user manually resizes their browser window too small, the elements on the page overlap each other and looks a complete mess.
Is there a way to stop this from happening?

I looked at the min width property but it hasn't seemed to do anything.

Here is what the page looks like normally:


Here is what the page looks like when the browser has been resized:


Everything is inside a container (the design is 100% page width):
#container {
background: #fff;
position:relative;
margin: 0 auto;
height: 100%;
text-align: left;
}

And the elements such as navigation boxes are positioned like so:
#navcontainer {
position:absolute;
right:0;
margin-top: 15px;
width: 161px;
overflow: hidden;
margin-right: 15px;
}

Thanks.

 

set a min-width for your container. That will these overlaps from happening. But then min-width is not supported in IE6

 

Try this, I use it on my website:

http://www.cssplay.co.uk/layouts/minimum.html

 

Setting a min-width of 800px has stopped the two images in the logo from overlapping, but the navigation box I have provided a screenshot of is still overlapping the main box on the left.

Here is the container which the box on the left is placed inside:
.contentcontainer {
margin-top: 0;
margin-right: 180px;
margin-bottom: 0;
margin-left: 15px;
overflow: hidden;
width: 728px;
}

Here is the code for the navigation container:
.navcontainer {
position:absolute;
right:0;
margin-top: 15px;
float: right;
width: 161px;
overflow: hidden;
margin-right: 15px;
}

Here is the page container:
#container {
background: #fff;
margin: 0 auto;
height: 100%;
text-align: left;
min-width: 800px;
}