Here is the sandbox https://jsfiddle.net/o82kLqdn/1/ There is a body with the size of 600px, in it there is a container of 521px in which there are three blocks of 164px each indented in 10px. I did all this rubber, i.e. divided internal blocks into external got size. Now when you get the right size, everything works and the size remains as it should be. But when I narrowed the size of the window, the last block crashes ... because of what this behavior was all kept in place.

body{ max-width:600px; border:1px black solid; margin:0 auto; } #wraped{ border:1px black solid; width:86.833%; margin:0 auto; } #block{ width:31.477%; height:100px; background:red; margin-right:1.919%; display:inline-block; } #block:last-of-type{ margin:0; } 
  <div id="wraped"> <div id="block"></div> <div id="block"></div> <div id="block"></div> </div>

    1 answer 1

    The size of the body element is specified as absolute / static. In fact, no dimensions are applied to this element. If this is so necessary for you, then apply the relative size in%. The size of the style selector wraped (parent blocks) = 86.833%. If this figure is divided into three (the number of blocks in the container), then you get about 28%, but not 31.477% - like you. And woo-a-la:

     body{ border:1px black solid; margin:0 auto; } #wraped{ border:1px black solid; width:86.833%; margin:0 auto; } #block{ width:28%; height:100px; background:red; margin-right:1.919%; display:inline-block; } #block:last-of-type{ margin:0; } 
     <div id="wraped"> <div id="block"></div> <div id="block"></div> <div id="block"></div> </div>

    • Yes, but you need to have a 600w container for #wraped - PeGaS
    • Specify container in% - nikant25