Firefox: parent does not feel dynamic content width - html

Question

Example
If the adjacent element of a parent floating, the parent does not feel the width of the element, if it is dynamic. In chrome and opera works fine.
<div class="b-wrap">
<div class="b-content">
<div class="b-rect-left"></div>
<div class="b-rect-right"></div>
<div class="b-child-cont">джигурдаололо</div>
</div>
</div>
.b-wrap {
background-color: red;
height: 50px;
float: left;
}
.b-content {
margin: 5px;
overflow: hidden;
}
.b-rect-left {
width: 40px;
height: 40px;
float: left;
background-color: orange;
}
.b-rect-right {
width: 30px;
height: 30px;
float: right;
background-color: green;
}
.b-child-cont {
overflow: hidden;
}

Answer 1

Firefox calculated the width of an element that contains floats differently from Chrome. I don't know why.
However, what seems to be happening is the following.
The actual content in your snippet is in b-child-cont, a non-floated element. b-child-cont determines the width of b-content since the two other elements are (b-rect-left and b-rect-right) are floated and do not factor into determining the width of the content. In turn, the width of b-content sets the width of b-wrap, because b-wrap is floated and takes on the width of its child elements.
You as a designer and developer, need to allow some space for the two floated elements. You can do this in many ways. I will give two examples.
(1) Add left and right margins to b-child-cont:
.b-child-cont {
overflow: hidden;
background-color: yellow;
margin-left: 40px;
margin-right: 30px;
}
(Note: I added a background color to show the extend of the element.) The 40px and 30px values are based on the widths of the left and right square elements respectively.
(2) You can also specify a with to the parent element containing the floats:
.b-child-cont {
overflow: hidden;
background-color: yellow;
text-align: center;
}
.b-content {
width: 30em;
}
In this case, I set the with of b-content to 30em (you can adjust this accordingly) and I centered the text in b-child-cont.
You have come across a cross-browser discrepancy in how the CSS box model is calculated. Once you are aware of it, you need to design around it, but that is not too hard to do.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/dzK73

Answer 2

Just add this firefox exception
#-moz-document url-prefix() {
.b-wrap{width:175px;}
}