i try understand following layout situation: got floating div undefined width acts container. inside got left floating header. there unfloated div wraps left floated div. unfloated div hiding content small viewport not matter observation.
you can see 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 fiddle, when add text unfloated div, whole container extends width. see here: jsfiddle 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 that? seems browser measuring whole width in 1 line , drops floated div 3 elements 1 line below? issue don't understand discussed here: right floated container results in line break.
why containing div becoming wider when there enough space text float next header?
edit1: seems in ie works without wrapping float line. browser issue in chrome/ff?
edit2: think problems can summarized not establishing consistent set of block formatting contexts. unfloated div within floated div floated children seems "undefined" , situation browsers interpret differently. solution establish consistent bfcs.
thanks patrick
it seems may not have solid feel how floats work, , how adjacent floated, , unfloated, content acts around them (dont worry, can tricky grasp , takes time).
if im right in understanding of issue, want establish correct block formatting context div green border, can established adding overflow:auto (amongst other approaches)
a block formatting context part of visual css rendering of web page. region in layout of block boxes occurs , in floats interact each other.
you can see when may need establish block formatting context when working floats, content appears collapsed. can see in original fiddle, in div green border not extend around boundaries of floated contents. adding overflow:auto restores anticipated behavior.
demo fiddle
