Уменьшение на странице, и мой div переходит на следующую строку

Question

, когда я уменьшаю масштаб в Google Chrome, мой правый div переходит на следующую строку, я пытаюсь понять, что я делаю неправильно. Может ли это быть встроенным блоком отображения? Я запутался здесь, но посмотрите:

Я не имею ничего в последнем новом ид

#latestnews { 
} 

Моих левого & правых столбцов

.left { 
    width: 70px; 
    float: left; 
    margin: 3px; 
    height: 60px; 
    padding-bottom: 5px; 
    border: 1px solid #C2C2C2; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    background: #E9E9E9; 
} 

.right{ 
    float: left; 
    padding-left: 5px; 
    margin-left: 10px; 
    margin: 3px; 
    width: 491px; 
    height: 60px; 
    border: thin solid #CCC; 
    background: #E9E9E9; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    padding-bottom: 5px; 
} 

Что показывает:

<div class="left" style="clear:both;"> 
    <div class="date"> 
     <span class="day">17</span> 
     <span class="month">Feb</span> 
     <span class="year">2014</span> 
    </div> 
</div><!-- End Left Column --> 
<div class="right">right</div> 

Когда я уменьшаю масштаб, он показывает это:

но на обычный вид, он показывает это:

это возможно, что я не включил ничего в моем контейнере для #latestnews? Спасибо за помощь!

Answer 1

Моя догадка заключается в том, что стиль float: left на div, который вы пытаетесь поставить справа, является причиной того, что у вас есть эта проблема.

Почему бы вам не попробовать избавиться от стилей float: left и заменить их на display: inline-block. Тогда ваша единственная проблема должна быть увеличена.