html - Text inside div displaces other divs -

i have placed 3 divs next each other using block-inline property.

when add text inside div exceeds divs width, displace surrounding divs shifting them down slightly.

<div class="explained_container">     <div class="explained_c-1">why text in div displace other divs</div>     <div class="explained_c-2">div 2</div>      <div class="explained_c-3">div 3</div>  </div> 

here fiddle created present problem.

http://jsfiddle.net/32e8m/

add float:left these classes .explained_c-1, .explained_c-2, .explained_c-3