Code

<style> .c { display: inline-block; background-color: #ddd; } .i { float: left; width: 200px; height: 40px; background-color: #aaa; } .i1 {background-color: #aaa;} .i2 {background-color: #bbb;} .i3 {background-color: #ccc;} </style> <div class="c"> <div class="i i1"></div> <div class="i i2"></div> <div class="i i3"></div> </div>

Where does the parent's empty space come from (from the side), when when resizing the browser window, the element with float jumps down? After all, essentially, the parent should fit snugly to the children, and not stretch to its full width, as far as I know.

How to make it fit to the children?

    2 answers 2

    The third block "jumps" down when resizing due to the fact that its width does not have enough space at a given window scale. At the same time, during the "jump" the parent block will have a maximum width, since the minimum required width of the parent block when display: inline-block - at which all blocks fit into a line (without hyphenation). If a snug fit is needed, use <br> to move the "jumping" blocks to the next line.

    • Thank. Interesting. How do you find this solution: jsfiddle.net/gegfw516/6 - Flexible_curd
    • I also thought about @media but this, unfortunately, is not valid. In general, in principle, it is necessary to get rid of <br> when using block layout. - impulsgraw

    Like this

     <div> <div style="float:left;display:inline-block!important;width:70px;padding:5px;border:1px solid;">Дитё 1</div> <div style="float:left;display:inline-block!important;width:70px;padding:5px;border:1px solid;">Дитё 2</div> </div>