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
Post a Comment