Vlad Merzhevich
The term "fixed design" is used to refer to page layout, which is created from layers given width. The choice of width depends on the orientation on certain resolution user monitor. So, for a resolution of 1024x768 pixels, the size of the table should be taken no more than 1000 pixels. This width is obtained by subtracting from the value 1024 the width of the vertical scrollbar and the borders of the browser window. For all users, a site built on this layout will be displayed correctly, but with high resolutions turns out to be too much empty space. Since the most popular resolution among Internet users is 1024x768, website developers focus on it and use a total layer width of 900-1000 pixels.
With a fixed design, the block with the material is usually placed at the left edge or in the center of the screen. Last option preferably, then the wide margins around are not so noticeable at high monitor resolutions (Fig. 1).
Rice. 1. Typical modular grid with fixed design
Numerical designations used in this figure: 1 - site title; 2 - left layer, usually contains navigation elements; 3 - right layer, contains the content of the page; 4 - "footer", the very bottom of the web page, it is usually placed in it contact information and various buttons.
To create the layout shown in Fig. 1, some preliminary points should be considered - what will be the total width of all elements; where the layout will be placed - in the center of the page or at the left edge; what colors and fonts will be used, etc. The steps to be taken before writing the code are described below.
Layer Width
First you need to determine the overall width of the visual elements of the web page. As mentioned above, this value is determined by the designer himself based on a preliminary collection of data about future users of the site. Although most designers set the width, which is called "from the lantern", based on their own convenience. Here in example 1, using the same principle, the width of all layers is 750 pixels.
So, the entire width is known, now we need to divide it into two parts. The layer marked with the number 2 (Fig. 1) is allocated under the menu, its width should be minimal, but sufficient for comfortable reading text. Let's make it a round number, like 200 pixels. Everything else will be content.
Layer Height
The height of the layer changes dynamically depending on its content. If you want to set the height of the layer yourself, you can use the height property and set the height in pixels, percentages, or other css units. Please note that with this approach, the alignment of the layer content always occurs along its top edge, so you should not set too high a height (example 1).
Example 1 - Setting the layer height
Similarly, the height of the layer can also be changed by padding by changing the value of padding-top and padding-bottom (example 2). But this method is less universal.
Example 2: Setting layer height using padding
In this case, the height of the layer is the sum of the top and bottom paddings and the height of the content that will be centered vertically.
If the height of the layer's content is greater than its height, set with the height property, then the browser leaves the layer's dimensions unchanged and overlays the content on top of it.
Center alignment
If there is a need to leave the layout aligned to the left edge of the window, nothing needs to be done, this effect will happen by itself. But in order for the layout to be in the center of the browser window, one more additional layer will help, which will serve as a frame and include all other layers. Let's call it container and write the following style for it (example 3).
Example 3: Center alignment
The margin-right and margin-left properties are auto value set the alignment of the layer to the center of the web page. In the same selector, we specify the total width of all layers.
Right-aligning a web page layout is usually never done - either center or left alignment is used.
Indentation on a web page
Horizontal and vertical padding from the edge of the browser to the content of the web page are built into the default browser. However, you can change the value of these properties by indenting more or less as you wish. For example, you can set the indent from the top edge of the window to the page title, or remove it altogether.
Indents are set by properties CSS margin and padding for the BODY selector. The presence of two properties instead of one, again requires the interests of different browsers, margin - Internet Explorer, and padding - Opera and Firefox. Combining different properties ensures that the web page is displayed in different browsers will be the same.
You can control individual margins from different screen edges using the margin-top , margin-bottom , margin-right , and margin-left properties, which respectively change the distance from the top, bottom, right, and left edges of the browser window. Before using them, you must set the value of the margin property to zero (example 4).
Example 4: Changing the top padding from the edge of the browser
Colors
CSS has several options for defining the color of the text and background of a layer. The color property specifies the color of the text in the layer, and the background property specifies the background color (example 5).
Example 5: Color change
The background color for the menu layer in the example is dark green and the text is white.
When laying out the next project (or even just designing the layout grid), many faced a dilemma - to use a fixed layout width or a "rubber" grid that adapts to the size of the browser window.
Each of these decisions has its pros and cons, I want to focus on the cons, since usually it is between two evils that one has to choose between the cons of these decisions.
Fixed Width Layout Grid
The layout is driven into a horizontal dimension of 960-980 pixels (so that everything is included on most devices in most resolutions), which, with large horizontal window sizes, looks somehow chilly - thin vertical stripe useful page content and huge useless margins of wasted space on the sides."Rubber" layout grid across the width of the window
Again, with large horizontal window sizes, there is another problem: 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 margins at large horizontal window sizes are no longer visually consistent with the horizontal sizes of the elements, which also does not add comfort when looking at the 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 simple means 2 more versions of the CSS specification.
update: I want to make a reservation that we are not talking about the classic rubber effect and about adapting to absolutely all resolutions, but rather only about a certain reasonable range of resolutions for which the layout is designed. In the examples below, this is the classic desktop resolution range with a horizontal resolution margin of 1024 pixels or more.Let me emphasize again: the post is not talking about a solution for all types of devices and all ranges of resolutions. Within the framework of one layout, this task cannot be solved in principle., to solve it one way or another, several layouts will be required. Flies separately, cutlets separately.
Create a layout container:
...
We decorate it with 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 not enough due to the fact that with very large horizontal window sizes, problems with the length of the lines again appear. This is solved by an equally simple additional trick: creating an additional outer container inside the one already described and limiting it maximum width fixed value (subjectively it seems to me that values in the range of 1400-1600 pixels are best suited). Again, we only use CSS tools 2.0. This solution instead of the one suggested in the first comment simple addition the width percentage for the source container will also work in IE, which, up to version 9, does not understand the simultaneous specification of values.
Adding 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 quite universal, it can be applied to any block elements.
When we create a form, word table, we need that when filling the cells, their size does not change so that the table does not move. To do this, you need to install fixed cell size in tableWord
. How to make a booklet in Word in the article"Creating a booklet in Word".
How to change row height in tableword.
To change the width of rows, columns, you must first select them.
First option.
It is advised to go to the “Page Layout” tab in the “Page Setup” and on the “String” tab put right size lines. On the Column tab, set the size of each column. 
How to pin a table inword.
To keep the table from moving Word sheet, on the "Table" tab, click the "around" button. Click on the "Placement" button - set the parameters for placing the table.
Second option.
Click on the table and on the "Layout" tab, adjust the sizes of rows and columns. In the "Cell Size" section, click on the "AutoFit" button. If we press " fixed width column", then the column width will not change when the cell is filled. 
But the funny thing is that in some versions of Word, a completely different Page Setup window. There are no "Row" and "Column" tabs.
How to fix row height and width word column
, in this case. 
Panel first quick access place the function button "Table properties". Click "Customize Quick Access Toolbar" button(button "triangle with a dash"). Select the function "Other commands".
This button appeared on the Quick Access Toolbar and is called "Table Properties". It becomes active when we click on the table.
We need fix row height in tableWord.
In the Row Height section of the dialog box, set it to Exact. And in the line "Value" we put the number of the height of the line. But the value is not set in mm. or see, and in Fri. PT is a point.
1 pt = 0.35 mm. Easier - the standard line height in the table is 12pt. A4 sheet height portrait orientation- 878 pt (29 cm without borders).
Let's put "48 pt". Uncheck the box next to "Allow line wrapping on next page».
Click "OK". It turned out like this.
