html - Shrink wrap breaks as I add more text into a child DIV element -

html code:

<div id="container">     <div id="first">         foo bar baz foo bar baz         foo bar baz foo bar baz     </div>     <div id="second">         foo     </div>     <div id="third">         foo bar baz foo bar baz         foo bar baz foo bar baz     </div> </div> 

css code:

body {     text-align: center; } #container {     display: inline-block;     background: lightcyan; } #first {     display: inline-block;     background: lightgreen; } #second {     background: orange; } #third {     width: 30%;     display: inline-block;     background: lightblue; } 

i trying ensure entire div#container shrink-wraps around div#first. above code works expected. see demo: http://jsfiddle.net/hhre6/

however, add more text div#third, shrink-wrap breaks. see broken demo: http://jsfiddle.net/n4kn2/

1. why happen?
2. how can prevent happening?

in example have width of container depends on width of content, which, in turn, depends on width of container. that's why renderer can't take account actual width of #third block in time calculates width of #container.

according css spec, the width of inline block calculated as

min(max(preferred minimum width, available width), preferred width).

where preferred width calculated

by formatting content without breaking lines other explicit line breaks occur

so width of container becomes width of #third block (as widest one) if content laid out without line breaks, , actual width of #third block set 30% of width.