css - 缩放后固定 div 相对位置

Question

我有 3 个 div block ，第一个较大的位于网页的左侧，另一个较小的位于网页的右侧。我希望它们的相对位置在所有具有任何缩放级别的浏览器中都是固定的。如果我现在放大，右栏中的两个 div block 会下降到第一个大 div 下面。

这里是 JFFIDDLE代码链接，请放大/缩小以查看问题。

<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

将 min-width: 800px; 添加到 CSS 文件中的 #topdiv id。

CSS:

#topdiv {
    display: inline-block;
    background-color:#b0c4de;
    min-width: 800px;
}