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

Question

Ran across an odd issue today. I've been working with a floated menu that works on everything I've tested thus far (not gotten to old IE versions yet...), except firefox. The page renders correctly when first loaded, but if the window is resized, elements with deterministic layouts (i.e. inline elements, divs with overflow:hidden, etc) affected by the floated element fail to update.
Anyone have a (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.

Answer 1

I'm not sure if this is what you're trying to achieve or not, but I would personally use a container for the 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 your content in the container.