Исправить относительные положения div после увеличения

У меня есть 3 div-блока, первый из которых больше на левой стороне веб-страницы, а другой меньше в правой части. Я хочу, чтобы их относительное местоположение стало фиксированным во всех браузерах с любым уровнем масштабирования. Два div-блока в правом столбце выпадают ниже первого большого 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;
}