Полоса прокрутки при увеличении HTML-страницы

своего рода нуб вопрос о CSS

У меня есть пара divs

на странице. Теперь, когда я увеличиваю масштаб этой страницы, Div 3 (то есть в настоящее время плавающий влево) больше не подходит, поэтому он попадает прямо под Div 2. Как я могу изменить это поведение для всей страницы, чтобы появилась полоса прокрутки, когда я увеличиваю масштаб? Я попробовал установить переполнение-x: прокрутить для всего тела в css, но это не показало никакого эффекта.

Я сделал JSFiddle для этого: http://jsfiddle.net/Lq3Hv/

HTML

<div class="first">div1</div>
<div class="second">div2</div>
<div class="third">div3</div>
<div class="fourth">div4</div>

CSS

.first {
    background-color:red;
    width: 400px;
}
.second {
    background-color:blue;
    width: 200px;
    float:left;
}
.third {
    background-color:green;
    width: 200px;
    float:left;
}
.fourth {
    clear:both;
    background-color:yellow;
    width: 400px;
}

Попробуйте увеличить масштаб браузера, и вы увидите, что div3 попадает под div2. (В любом случае, хром). Обычно я хочу использовать решение, которое работает как в IE8 +, так и в хром.

Благодарю.