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