Fix div relative positions after zoom - css

Question

I have 3 div blocks, the first one is bigger on the left hand side of the web-page and the other are smaller in located the right hand side. I want their relative location become fixed in all browsers with any zoom level. The two div blocks in the right column drop down below the first big div if I zoom in now.
Here is JFFIDDLE link of the code, please zoom in/out to see the issue.
<div id="topdiv">
<div class="bigdiv">
<p> big div </p>
</div>
<div id="staticcal">
<p> staticcal </p>
</div>
<div id="staticnews">
<p> staticnews </p>
</div>
</div
#topdiv{
display: inline-block;
background-color:#b0c4de;
}
.bigdiv{
margin: 10px 0;
position: relative;
width: 335px;
height: 250px;
float: left;
border: 2px solid #c7930d;
}
#staticcal {
width: 220px;
height: 100px;
line-height: 175px;
float: right;
display: inline-block;
border: 2px solid #c7930d;
border-radius: 4px;
margin: 5px;
margin-top: 10px;
margin-right: 0px;
position: relative;
}
#staticnews {
width: 220px;
height: 100px;
line-height: 175px;
float: right;
display: inline-block;
border: 2px solid #c7930d;
border-radius: 4px;
margin: 5px;
margin-right: 0px;
position: relative;
}

Answer 1

Add min-width: 800px; to the #topdiv id in your CSS file.
CSS:
#topdiv {
display: inline-block;
background-color:#b0c4de;
min-width: 800px;
}

Answer 2

I noticed that you are using border-radius in your development, so I updated your file to account for cross browser use. Here is an updated JSFiddle for your review. Additionally I lined up your staticcal and staticnews by adding float: left. Here is a minified version of your code: CLICK HERE
HTML:
<div id="topdiv">
<div class="bigdiv">
<p>big div</p>
</div>
<div id="staticcal">
<p>staticcal</p>
</div>
<div id="staticnews">
<p>staticnews</p>
</div>
</div>
CSS:
#topdiv {
display: inline-block;
background-color:#b0c4de;
min-width: 800px;
}
.bigdiv, #staticcal, #staticnews {
position: relative;
float: left;
border: 2px solid #c7930D;
}
.bigdiv {
margin: 10px 0;
width: 335px;
height: 250px;
}
#staticcal, #staticnews {
display: inline-block;
line-height: 175px;
width: 220px;
height: 100px;
margin: 5px;
margin-top: 10px;
margin-right: 0px;
-webkit-border-radius: 4px; /*This will address iOS 1 to 3.X, Android 1.6-2.1, Safari 3 - 4*/
-moz-border-radius: 4px; /*Firefox 1 to 3.6*/
border-radius: 4px; /*IE 9+, Opera 10.5, Chrome, Safari 5, FireFox 4+, iOS 4, Android 2.1+,
}
p {
text-align: center;
}