Floating text extends container div width without need - html

Question

I try to understand the following layout situation: i got a floating div with an undefined width that acts as a container. inside i got a left floating header. the there is unfloated div that wraps another left floated div. the unfloated div is for hiding content with a small viewport but that does not matter for the observation.
you can see the layout structure here: jsfiddle before
<div class="container" style="float: left">
<div style="float: left">HEADER</div>
<div style="border: 1px solid green;">
<div style="float: left">
<div class="element">lorem ipsum dolor sit amet. </div>
<div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
<div class="element">lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
in this fiddle, when i add Text into the unfloated div, the whole container extends its width. see here: jsfiddle with text.
<div class="container" style="float: left">
<div style="float: left">HEADER</div>
<div style="border: 1px solid green;">TEXT
<div style="float: left">
<div class="element">lorem ipsum dolor sit amet. </div>
<div class="element">lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.</div>
<div class="element">lorem ipsum dolor sit amet. </div>
</div>
</div>
</div>
why is that? it seems like the browser is measuring the whole width in one line and then drops the floated div with the 3 elements one line below? this is another issue i don't understand but this is already discussed here: Right floated container results in line break.
why is the containing div becoming wider when there is already enough space for the text to float next to the header?
edit1: it seems that in ie this works without wrapping the float to another line. is this a browser issue in chrome/ff?
edit2: i think all the problems can be summarized by not establishing a consistent set of block formatting contexts. an unfloated div within a floated div with floated children seems to be "undefined" and a situation that browsers interpret differently. solution is to establish consistent BFCs.
Thanks for your help
Patrick

Answer 1

It seems like you may not have a solid feel for exactly how floats work, and how adjacent floated, and unfloated, content acts around them (dont worry, it can be tricky to grasp and takes time).
If Im right in my understanding of the issue, you want to establish a correct block formatting context for the div with the green border, this can be established by adding overflow:auto (amongst other approaches)
A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.
You can generally see when you may need to establish a block formatting context when working with floats, as the content appears collapsed. You can see this in your original fiddle, in that the div with the green border does not extend around the boundaries of its floated contents. Adding overflow:auto restores the anticipated behavior.
Demo Fiddle