CODEWITHSUNDEEP
htmlcssgoogle-chrome
kwichz
kwichz

Reputation: 2453

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

It works nicely on IE and Chrome, but on Chrome, if I refresh the page quickly, sometimes the whole content div go hide.

If I remove overflow:auto; I get rid about this problem, but of course I lost the background color.

Is it a common issue? Or what? And how can I fix it?

P.S. Chrome version is 8.0.552.237

Upvotes: 2

Views: 6516

Answers (2)

gani
gani

Reputation: 109

by setting css for div inner elements as 

display:inline

i resolved this

Upvotes: 1

Ibu
Ibu

Reputation: 43810

.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 :)

Upvotes: 4

Related Questions