Problem With Overflow:auto; And Chrome

I have this kind of html code : .content { background-color:#3C2B1B; overflow:auto;} .menu { width:185px; float:left; background-color:#E2DED2; margin-top:10px; margin-left:10px; m

Solution 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>

This is a little trick i use when working with floating elements. adding the empty div with the clear both css will keep the .content div from collapsing

I hope it works for you :)

Solution 2:

by setting css for div inner elements as

display:inline

i resolved this