Firefox doesn't update float-dependent layout on window resize -


ran across odd issue today. i've been working floated menu works on i've tested far (not gotten old ie versions yet...), except firefox. page renders correctly when first loaded, if window resized, elements deterministic layouts (i.e. inline elements, divs overflow:hidden, etc) affected floated element fail update.

anyone have (preferably javascript free) workaround?

html:

<div id="leftbar">     <a>test1</a>     <a>test2</a> </div> <div id="bodycontent">     <div>         <div id="contenta">             hello world!         </div>     </div>     <div>         <p>paragraph test</p>     </div>     <div style="clear:both">         enclosing div.     </div> </div> 

css:

#leftbar {     float:left;     width:50px;     background:red;     height:75px; }  #bodycontent {     margin:0 auto;     width:500px;     background:green; }  #bodycontent > div {     overflow: hidden; } #contenta {     width:100%;     height:50px;     background:blue; } 

jsfiddle here.

i'm not sure if you're trying achieve or not, use container elements.

#container {     width: 550px; }  #leftbar {     float:left;     width:50px;     background:red;     height:75px; }  #bodycontent {     margin:0 auto;     width:500px;     background:green;     overflow: hidden; }  #contenta {     width:100%;     height:50px;     background:blue; } 

then wrap content in container.


Comments

Popular posts from this blog

user interface - Python attempting to create a simple gui, getting "AttributeError: 'MainMenu' object has no attribute 'intro_screen'" -

jquery - Common JavaScript snippet to share files on Google Drive, Dropbox, Box.net or SkyDrive -

Android Gson.fromJson error -