Prevent fixed div from overlapping liquid divs when screen is resized

I have looked at every div discussion I could find and did not quite see my answer. I hope I am not reposting.

I have a liquid layout except one div on the left that I have in开发者_开发问答 a fixed position. I need to keep if fixed because when I scroll I want it to stay. The other divs are spread out next to it. Everything looks great until the screen reaches a certain width (right around 1700px) and then the fixed div starts to cover the div immediately to the right.

I have used min-width on the body to fix it, but the min-width that works is too large to guarantee preventing a horizontal scroll on smaller screens, or when someone resizes the window/zooms.

How can I keep it liquid and still make it look good no matter what the screen size?

CSS below:

body {
min-width:1000px; /*~1700 to fix problem*/
padding-left:5px;
padding-right:5px;
padding-top:0;
padding-bottom:0;
margin:0;
}

.container {
padding: 0;
margin-left:auto;
margin-right:auto;
height:100%;
}

.leftinfo {
float:left;
position:fixed;
left:.5%;
top:150px;
background-color:#FFF;
height:400px;
width:160px;;
padding:10px;
}

.rightinfo {
background-color:#33F;
float:right;
height:200px;
border:thin;
width:15%;
margin-top: 25px;
}

.contentbackground {
float:left;
width:74%;
margin-left:10.5%;
margin-top: 30px;
}

Thank you much for the help!

Have you considered using % width values instead of px? This could allow for relative resizing under different window sizes.