проблема с переполнением: авто; и хром

Question

У меня есть такой код HTML:

.content { background-color:#3C2B1B; overflow:auto;}
.menu { width:185px; float:left; background-color:#E2DED2; margin-top:10px; margin-left:10px; margin-bottom:10px; padding-left:10px; padding-right:10px;}
.main {width:675px; float:left; margin:10px;}

<div class="content">
    <div class="menu">
        Menu    
    </div>

    <div class="main">    
        Main
    </div>
</div>

Это прекрасно работает в IE и Chrome, но в Chrome, если я быстро обновляю страницу, иногда весь контент проходит hide.

Если я удаляю overflow:auto;, я избавляюсь от этой проблемы, но, конечно, я потерял цвет фона.

Это общая проблема? Или что? И как я могу это исправить?

P.S. Версия Chrome 8.0.552.237

Answer 1

.content { background-color:#3C2B1B;}
.menu { width:185px; float:left; background-color:#E2DED2; margin-top:10px; margin-left:10px; margin-bottom:10px; padding-left:10px; padding-right:10px;}
.main {width:675px; float:left; margin:10px;}
.clear {clear:both}

<div class="content">
    <div class="menu">
        Menu    
    </div>

    <div class="main">    
        Main
    </div>
    <div class='clear'></div>
</div>

Это небольшой трюк, который я использую при работе с плавающими элементами.добавление пустого div вместе с clear css предотвратит сворачивание div .content

Надеюсь, это работает для вас

Answer 2

, установив css для элементов div как

display:inline

я решил это