CSS layouts: fixed, rubber, elastic. Advantages and disadvantages

Note: below is a translation of the article “CSS Layouts: The Fixed. The Fluid. The Elastic. ” , The layout is used as a Russian equivalent of the layout term. The article discusses two types of "rubber" layout, so one of them for the distinction is designated as "elastic" (elastic, thanks to MTonly for the valuable comment). The author summarizes the main pros and cons of each of the considered layouts (layout methods).



What layout layout (using Cascading Style Sheets, CSS) can be considered the best? Each of them has its own hacks ( quirks ) and its own unique pros and cons. Will one of them be more user-friendly than the rest? How easy will it be to use it? What problems do each of them have and how to get around them? Is one of them made up the easiest of all? Are any of them flawed, completely unsuitable? Most likely, many will definitely answer these questions, but I will not be in such a hurry. Each of these layouts I like, and each is applicable in one way or another, if you do it wisely and carefully check the ease of use and equal accessibility for all categories of users. All of them are part of the presentational layer for the website, so most of the accessibility issues stem from the correct use of semantics and general layout rules. Next, I will describe my view on rigidly fixed ( rigid fixed ), adaptive rubber ( adaptable fluid ) and expandable elastic ( expandable elastic ) layouts.

Fixed width layouts

A fixed-width site layout has a main area for the content ( wrapper ), whose width is set to a constant value, independent of the screen resolution of the user agent. The most common and reasonable is the width of 760 pixels - the size at which users of monitors with a resolution of 800 × 600 will see the main content of the site in almost the entire width of the screen, without resorting to additional horizontal scrolling.

')

The author's blog is an example of this typesetting, although it can be easily brought to a rubber or elastic layout without changing the current pictures.

Pros of this layout

• The container for the main content of the site is rigidly fixed, for it does not need to set the maximum or minimum width (which does not, in fact, cross-browser support for the current moment);
• In some cases, using fixed-width layouts is easier to create certain effects or design solutions ( for example, to position a drop-down menu or tooltips to the form fields ). Some design layouts are intelligently wired only using the fixed width of the main container;
  
  The layout, based on the width of the main field stated above - 760 pixels - which is typical width for this kind of layouts, is, in my view, optimal for maximum readability of the text (I partially agree with the author of the article, in this case about 200 pixels can be left to side menu, and the site will be placed in 1024 × 768 in width, however, then, rather, the width of the main field of 1000 pixels will be meant .