HTML & CSS: Dropout of a float element with a given relative width from a string

Question

Suppose we created several blocks, set their relative length and zaflot them to the left (link to the source code ):

.object{ width: 30%; height: 200px; float: left; margin: 0 9px 15px; } .red{background-color: #800000;} .yellow{background-color: #DAA520;} .green{background-color: #6B8E23;} .blue{background-color: #4169E0;} .teal{background-color: #008080;} .purple{background-color: #4B0082;}

 <div class="object red"></div> <div class="object yellow"></div> <div class="object green"></div> <div class="object blue"></div> <div class="object teal"></div> <div class="object purple"></div>

What is the reason why despite setting the relative width, the right blocks from the stream are output at certain screen widths?

The problem also lies in the fact that this very “width of the fallout” for each browser is different. Specifically, in my task, block dropping is acceptable, but it must occur on the same window width for all browsers in order to be able to set up media queries.

Well, each browser has its own body padding ... try to reset them as well as the indents between the blocks, probably of a fixed width ...... Check what takes up the space that is missing and the loss occurs
In general, it is better to make containers 33.3333333% c padding.

Accepted Answer · 2016-09-23T08:06:04

This is due to the fact that the margin not included in the relative width specified by you width: 30% . That is, the block will first take the width you specified, and then add a margin to it. The actual width of the block (that is, taking into account the indentation) in this case will be more than 30% .

Why do blocks jump not immediately, but at a certain point? You assume that the line should include three blocks. In this case, the width of one block will be 100/3 = 33.3333% . You specify the width of 30% . It turns out the balance of 3.3333% . Tk in the line you have three blocks, then the total free space (balance) is 9.9999% . When your browser is stretched to full width, then the amount you specify is an absolute margin: 0 9px 15px; all three blocks fit into this residue. By compressing the browser, you reduce the absolute value in pixels of your remaining 9.9999% and at some point it becomes less than the sum of indents, which brings the block down.

... What to do if the border for decorative purposes is already specified and cannot be used as a fictitious indent?
After all, there is no such value box-sizing, which takes into account the margin.

HTML & CSS: Dropout of a float element with a given relative width from a string

1 answer 1

More articles: