html - Why does this DIV container not resize consistently? -

as fiddle shows, have outer div inner div on left , 2 inner spans. want 2 spans sit next div if separate them br outer div resizes based on width of first span. if second span narrower first sits in correct position. if wider first drops below inner div.

css , html:

  #wrapper {          border: 2px solid blue;          display: inline-block;      }            #imagecontainer {          border: 1px solid red;          background-color: yellow;          display: inline-block;          height: 60px;          width: 60px;        }            .slab {          display: inline-block;      }

   <div id="wrapper">          <div id="imagecontainer">              image          </div>          <span id="line1" class="slab">sample text</span>          <br>          <span id="line2" class="slab">sample text 2</span>      </div>      

your code behaving should have been. have mentioned inline-block imagecontainer , other spans. means if there enough space within current line - inner div imagecontainer , other span try fit , if not enough space - span fall next line subsequently last , first span.

recommended approach structure code in following manner:

<div class="outer">     <div class="img"> <!-- can use inline-block or float (must have width)  -->       put image here     </div>     <div class="content"> <!-- can use inline-block or float (must have width)  -->          put spans here.     </div> </div>