css - Inline-blocks inside fixed width content overflowing -
    i have 2 inline-blocks of fixed content, i'm trying display these next each other.   they're both held within div of width: 1000px; , 2 inline-block divs both width: 400px;  , width: 600px;  respectively.   the 2 divs don't display inline, second div collapses underneath first, if drop width of second width: 550px;  both display inline, question being:   how come 2 divisions have combined width of 1000px  can't both fit inside container has width of 1000px; ?   fiddle below.   <div class="layout">   <div class="width">     <div class="area left">      </div>     <div class="area right">      </div>   </div> </div>   and css   .layout {   box-sizing: border-box;   padding-left: 250px;   padding-right: 250px;   padding-top: 50px; }  .layout .area.left, .layout .area.right {   display: inline-block;   height: 250px; }  .layout .area.left {   width: 400px;   background: green; }  .la...