How to fix styles under “float: left”?

Question

How to set up the styles correctly so that on the small screen the blocks v1 and v2 are always in line horizontally? Just like in the picture:

At the same time, on the big screen not to break such an alignment:

In the code below, on a small screen, it works correctly only in a short interval, but otherwise it breaks:

<style> @media screen and (min-width: 428px) { /*Большой экран*/ #aaa {float: left; width: 230px;} #vs1 {display : none;} #bbb {float: left; width: 170px;} #vs2 {display : block; clear: left;} #ccc {clear: left;} } @media screen and (max-width: 428px) { /*Маленький экран*/ #aaa {width: 400px;} #vs1 {display: block;} #vs2 {display: none;} #bbb {width: 400px;} } </style> </head> <body> <div id="ab" style=""> <div id="aaa" style="height: 200px; background-color: lightgreen; opacity: 0.3;">A</div> <div id="vs1"> <div id="v1" style="float: left; width: 300px; height: 40px; background-color: orange; opacity: 0.3;">v1</div> <div id="v2" style="float: left; width: 100px; height: 40px; background-color: khaki; opacity: 0.3;">v2</div> </div> <div id="bbb" style="height: 200px; background-color: lightblue; opacity: 0.3;">B</div> </div> <div id="vs2"> <div id="v3" style="float: left; width: 300px; height: 40px; background-color: brown; opacity: 0.3;">v3</div> <div id="v4" style="float: left; width: 100px; height: 40px; background-color: yellow; opacity: 0.3;">v4</div> </div> <div id="ccc" style="width: 400px; height: 22px; background-color: red;">C</div> </body>

On flexbox the decision will go or necessarily float: left? - sirWill

sirWill sirWill 572 3 17 · Accepted Answer · 2018-07-11T11:50:04

If we talk about responsive layout, then there should not be any absolute widths for the blocks - it will constantly break the layout when the window is resized. Of course, if there is a need to adjust the output for specific devices / windows, then these cases should be disassembled separately.

In your example, the output breaks due to the lack of height of the container #vs1 on small screens. Initially, it is equal to 0 , since all the blocks nested in it are with float:left; and therefore block B is leaving for them.

A more modern solution for the layout of a similar configuration resulted in a snippet using flex . Works on all screen widths while maintaining the proportions of the blocks. If you need to limit the minimum width - add the necessary min-width blocks and you will be happy;)

 body { margin: 0; } #v1, #v2, #v3, #v4 { height: 40px; opacity: 0.3; } #v1, #v3 { width: 75%; } #v2, #v4 { width: 25%; } #aaa, #bbb { height: 200px; opacity: 0.3; } #ccc { width: 100%; } @media screen and (min-width: 428px) { /*Большой экран*/ #ab { display: flex; width: 100%; } #aaa { width: 57.5%; } #vs1 { display: none; } #bbb { width: 42.5%; } #vs2 { display: flex; } } @media screen and (max-width: 428px) { /*Маленький экран*/ #aaa { width: 100%; } #vs1 { display: flex; } #vs2 { display: none; } #bbb { width: 100%; } }

 <div id="ab" style=""> <div id="aaa" style="background-color: lightgreen;">A</div> <div id="vs1"> <div id="v1" style="background-color: orange;">v1</div> <div id="v2" style="background-color: khaki;">v2</div> </div> <div id="bbb" style="background-color: lightblue;">B</div> </div> <div id="vs2"> <div id="v3" style="background-color: brown;">v3</div> <div id="v4" style="background-color: yellow;">v4</div> </div> <div id="ccc" style="height: 22px; background-color: red;">C</div>

Your hint "due to the lack of height of the container # vs1" helped.
However, I did not understand why this editing with height did not help: <div id = "vs1" style = "height: 40px;"> but this one with width <div id = "vs1" style = "width: 400px;"> decided the problem.
If you have all the dimensions in absolute values - then everything becomes extremely simple - check in the inspector where this or that size flies and prescribe it.
Although it is odd to do everything with fixed widths / heights and at the same time think about adaptability, but you know your task and its environment more precisely.

How to fix styles under “float: left”?

1 answer 1

More articles: