Clever adaptation of the width of block elements on pure CSS 2.0
Mounted next project (or still only when designing a breadboard) many were faced with a dilemma - to use a fixed width of the layout or a “rubber” grid adapted to the size of the browser window.
Each of these decisions has its pros and cons, I want to focus on the cons, because it is usually between two evils in the reflection of the minuses of these decisions you have to choose.
The layout is driven to a horizontal dimension of 960-980 pixels (so that on most devices in most resolutions everything fits), which at large horizontal window sizes look like something chilly - a thin vertical bar of useful page content and huge useless fields of unused space on the sides.
')
Again, with large horizontal window sizes, there is another problem: the lines of text become very long, and reading them becomes not at all as comfortable as we would like.
Another common problem with this solution is that the side indents with large horizontal window sizes are not so well visually consistent with the horizontal dimensions of the elements, which also does not add comfort when looking at the unfolded layout.
I want to offer a simple solution - to limit the minimum horizontal size to a fixed value in pixels, and to make the maximum relative as a percentage of the window width. This is very trite solved by simple means 2 more versions of the CSS specification.
Create a layout container:
We make it a simple style code:
However, this solution may seem to someone a little due to the fact that with very large horizontal window sizes again there are problems with the length of the lines. This is solved with the same simple additional method: creating an additional external container inside the already described one and limiting its maximum width to a fixed value (I subjectively think that the values in the range of 1400-1600 pixels are best suited). Again, we use only CSS 2.0 tools. Such a solution instead of the simple addition of the width in percent suggested in the first comment for the original container will also work in IE, which up to version 9 does not understand the simultaneous indication of values.
We add HTML:
And change the CSS a bit:
As you can see, the solution is extremely simple and fairly universal, can be applied to any block elements.
Each of these decisions has its pros and cons, I want to focus on the cons, because it is usually between two evils in the reflection of the minuses of these decisions you have to choose.
Fixed Grid Width
The layout is driven to a horizontal dimension of 960-980 pixels (so that on most devices in most resolutions everything fits), which at large horizontal window sizes look like something chilly - a thin vertical bar of useful page content and huge useless fields of unused space on the sides.
')
"Rubber" breadboard on the width of the window
Again, with large horizontal window sizes, there is another problem: the lines of text become very long, and reading them becomes not at all as comfortable as we would like.
Another common problem with this solution is that the side indents with large horizontal window sizes are not so well visually consistent with the horizontal dimensions of the elements, which also does not add comfort when looking at the unfolded layout.
I want to offer a simple solution - to limit the minimum horizontal size to a fixed value in pixels, and to make the maximum relative as a percentage of the window width. This is very trite solved by simple means 2 more versions of the CSS specification.
Update: I want to make a reservation that we are not talking about the classic effect of rubber and about adapting to absolutely all permissions, but rather about some reasonable range of permissions for which the layout is designed. In the examples below, this is a classic desktop resolution range with a horizontal resolution size of 1024 pixels.
Once again I emphasize: in the post we are not talking about a solution for all types of devices and all ranges of permissions. Within the framework of one layout, this task is not solved in principle , for its solution one way or another, several layouts will be required. Flies separately, cutlets separately.
Create a layout container:
<html> <head> ... </head> <body> <div class="page-container"> ... </div> </body> </html> We make it a simple style code:
div.page-container { min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; }
However, this solution may seem to someone a little due to the fact that with very large horizontal window sizes again there are problems with the length of the lines. This is solved with the same simple additional method: creating an additional external container inside the already described one and limiting its maximum width to a fixed value (I subjectively think that the values in the range of 1400-1600 pixels are best suited). Again, we use only CSS 2.0 tools. Such a solution instead of the simple addition of the width in percent suggested in the first comment for the original container will also work in IE, which up to version 9 does not understand the simultaneous indication of values.
We add HTML:
<html> <head> ... </head> <body> <div class="page-container"> <div class="page-container-inner"> ... </div> </div> </body> </html>
And change the CSS a bit:
div.page-container { max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; } div.page-container-inner { min-width: 960px; max-width: 1600px; margin: 0 auto; padding: 0; }
As you can see, the solution is extremely simple and fairly universal, can be applied to any block elements.
Source: https://habr.com/ru/post/148427/
All Articles