This page has been robot translated, sorry for typos if any. Original content here.

CSS layout of the site: layout in three columns

Our layout

A task

Our task is to create a three-column layout from CSS. This layout can serve as the basis for an information site with a "hat", the right also the left columns for the menu of additional information, with the central block of text also a "basement" for copyrights, contacts, among other things. Typical for the content project layout.

Undoubtedly, this layout can not be called a miracle of a design thought, but you can always bring this pattern to the "divine appearance" by selecting the right fonts, their size, adding the perfect also the correct logo. It will not be difficult to self-complicate the layout, adding new CSS blocks.

Full site layout in three columns entirely in CSS

Used technologies also support browsers

The site layout will be implemented entirely in CSS, the "occasional" use of XHTML will also be JavaScript.

The CSS layout used is supported by Internet Explorer 6, the current versions of Mozilla are also Opera. The route of some tweaks, the layout will also work in Internet Explorer 5. This should be enough. Our CSS is similarly forced to appeal to text browsers also to other exotic devices.

The efficiency of the code in IE 4, Netscape 4 and older browsers was not checked in any way, but I'm sure there will be problems. However, this is uncritical, look at the statistics of the popularity of browsers from hotlog, spylog also liveintenet.

Advantages are also disadvantages of the considered method of CSS site layout

The layout has serious pluses and quite serious shortcomings. It is necessary to decide what is more important for your site also its visitors.

Disadvantages:

  • Does not work in Internet Explorer 4, Netscape Navigator 4 also older browsers.
  • CSS layout (creating blocks also their positioning) is supported by modern browsers in no way ideal, so the page needs to be tested in all browsers used by your room, for minor, but unpleasant differences in the display of the page.
  • Flour with vertical positioning is also determining the height of elements in CSS. This is not so proud, unless you are in no way a fan of fitting all the elements with an accuracy up to a pixel.
  • For our layout, it is necessary that the column with the main content has an impressive height than the side columns. Otherwise, the page will look untidy. To be honest, this demand is typical for most sites with a vertical design. If the pages are written manually (and not generated by scripts), then the room can be finished with line breaks.
  • It is difficult to retrain from a table layout. At first, from margin'ov also padding'ov will become ill head :)

Plus:

  • Having mastered the CSS layout, it's easy to understand the code, change the styles. With a thoughtful arrangement of CSS blocks, minor design changes are not likely to be difficult - just edit the file with CSS.
  • Text browsers, as well as other limited devices for capturing information, need to like our layout - without styles, it is a simple text in one column with a minimum number of XHTML design elements.
  • Without CSS styles (i.e., neat XHTML), the layout is the title of the page at the very top as well, followed by the main text header. "Teduha" (links, copyrights, navigation, news - all that, for no reason the user came to the page) is waiting for its hour at the very bottom. Such an arrangement of information will have a beneficial effect on the attitude to the site of simple devices for concluding information, the very essence of search robots - they like what time the page has text, but not eternal table tags.
  • Fast display by browsers. In the case of impressive pages or a slow connection, the visitor can begin to pronounce the main text, while side-by-side menus are also loaded.
  • "Rubber" layout - the width of the blocks of the layout depends on the size of the browser window, so there is no useless useful screen space.
  • Easy implementation for this CSS layout version of the page to print.
  • Pure XHTML code is also a design by means of CSS, but not tables - it's "cool" is also very fashionable :) .

Perhaps, the advantages outweigh. So, if your site is not dedicated to Windows 3.11 of the corresponding room, if you are ready to master the block model, CSS also does not intend to add complex elements with non-standard layout to the layout, you can say more.

A bit of the theory of CSS site layout (creating also positioning CSS blocks)

There is no desire or a possibility to expound the theory in detail. This difficult subject is also extensive. I will try to "get rid" of links also briefly state what will be directly used in the layout.

So, the links:

Now a little on my own. A block is a rectangular element of a web page, which is specified using block (for example, <div> or <p>) elements (in bassurmanski, tags) of XHTML. The block takes up some space and ends with a translation of the line, the <div> element pair will be located on the page one below the other, because these are block elements. The pair of the <i> element will not be in any way, because they are inline elements.

Using CSS, you can define block parameters - margin, border, internal padding, and actual width of the content. The contents of the CSS block can show text, pictures, nested blocks, and objects ... The background-color property defines the background paint (fill) of the block, while the margin field is always transparent. The description of these properties is also the creation of a CSS block.

On the site www.ilovejackdaniels.com there is a useful memo on CSS, from where we allowed ourselves to cut out the CSS block scheme, not violating copyright for anything, but for more convenience. And of course forgive me ilovejackdaniels.com, which also owns all conceivable unthinkable benefits to this image:

Scheme of the CSS box model

The height of the CSS block in practice can not be defined in any way (it is moving about the "rubber" layout), of course we also do not need it. But the width of the block is our everything, it is made up of the width: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. In the layout there will be no border, everything will be done by padding also width - so it's easier also faster.

CSS site layout is "rubber", that is, its width depends on the available space (browser window size), so width is also padded in percent. Percentages specify the width relative to the parent element. The parent element is either a browser window (in fact, a <body> tag) or any block element in which the element is nested (in the layout several <div> will be nested in one parent <div> -block).

Blocks are created, with the help of CSS their properties (padding, width) are defined. It is necessary to correctly arrange them on the page. This also has CSS positioning. If you do not describe the location of blocks on the page, they will be displayed by the browser one below the other, according to the order of their description in the XHTML code of the page. This arrangement is called a normal flow.

There are various ways also of technology. We will use the position: absolute (absolute CSS positioning) property as well: position: relative (relative positioning). Next, you need to determine the offset (in pixels for hard layout of the site or in percentage for the "rubber") block on the page from the top or bottom, left or right point of reference. What is this benchmark?

For position: relative, the reference point is the location of the block in the normal stream. E. - position: relative; top: 10%; left: 10%; - also the block will move 10% downwards also to the right relative to its normal location. If you set the relative positioning in no way to set the offset, then the block will be located in the normal flow.

For position: absolute, the reference point is the precisely known element; normal flow and the location of other elements does not play a role. This point can be either a browser window or a parent block, which is full or relatively positioned. The offset is similarly determined by the pixels or percentage of properties top, left, bottom, right.

Let's try to extract from these seemingly "incompatible with life" rules of the spark reasonable - however, it is the layout code of the site of three columns.

XHTML also CSS layout code

CSS layout of the site: layout in three columns - screenshot with explanations

Here also further "pieces" of the code are also explanations to them. .

XHTML code



<code>&lt;html xmlns=http://www.w3.org/1999/xhtml&gt; &lt;head&gt; &lt;title&gt;CSS верстка сайта: макет в три колонки&lt;/title&gt; &lt;link rel=stylesheet type=text/css media=screen href=/style.css /&gt; &lt;link rel=stylesheet type=text/css media=print href=/print.css /&gt; &lt;script language=javascript type=text/javascript&gt; //&lt;![CDATA[ if (navigator.userAgent.indexOf('IE 5')!=-1) document.write('&lt;link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" /&gt;'); //]]&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=header&gt;&lt;p align=justify&gt;CSS верстка сайта: макет в три колонки&lt;/p&gt;&lt;/code&gt; &lt;div id=main&gt; &lt;div id=content&gt; &lt;p align=justify&gt;Информация, как принято вычислять, транспонирует из ряда вон выходящий вселенная...&lt;/p&gt; &lt;p align=justify&gt;Жизнь, пренебрегая деталями, фокусирует примитивный интеллект...&lt;/p&gt; &lt;p align=justify&gt;Напряжение, поэтому, непредсказуемо...&lt;/p&gt; &lt;p align=justify&gt;Представление нетривиально. Созерцание решительно фокусирует постсовременный постмодернизм...&lt;/p&gt; &lt;p align=justify&gt;Представление амбивалентно. Современная ситуация рефлектирует себя чрез принцип восприятия...&lt;/p&gt; &lt;p align=justify&gt;Смысл жизни решительно творит объект деловитости. Жизнь натурально означает вселенная...&lt;/p&gt; &lt;/div&gt; &lt;div id=leftmenu&gt; &lt;p align=justify&gt;&lt;strong&gt;Навигация&lt;/strong&gt;&lt;/p&gt; &lt;p align=justify&gt;&lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=en&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=17259,15700023,15700124,15700149,15700168,15700173,15700186,15700189,15700191,15700201,15700205&amp;amp;usg=ALkJrhibBegqf8N8tTfEajH4ZzLKWSloLg#&gt;Раздел 1&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=en&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=17259,15700023,15700124,15700149,15700168,15700173,15700186,15700189,15700191,15700201,15700205&amp;amp;usg=ALkJrhibBegqf8N8tTfEajH4ZzLKWSloLg#&gt;Раздел 2&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=en&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=17259,15700023,15700124,15700149,15700168,15700173,15700186,15700189,15700191,15700201,15700205&amp;amp;usg=ALkJrhibBegqf8N8tTfEajH4ZzLKWSloLg#&gt;Раздел 3&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=en&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=17259,15700023,15700124,15700149,15700168,15700173,15700186,15700189,15700191,15700201,15700205&amp;amp;usg=ALkJrhibBegqf8N8tTfEajH4ZzLKWSloLg#&gt;Раздел 4&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=en&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=17259,15700023,15700124,15700149,15700168,15700173,15700186,15700189,15700191,15700201,15700205&amp;amp;usg=ALkJrhibBegqf8N8tTfEajH4ZzLKWSloLg#&gt;Раздел 5&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=en&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=17259,15700023,15700124,15700149,15700168,15700173,15700186,15700189,15700191,15700201,15700205&amp;amp;usg=ALkJrhibBegqf8N8tTfEajH4ZzLKWSloLg#&gt;Раздел 6&lt;/a&gt;&lt;br /&gt; &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=en&amp;amp;u=http://www.shram.kiev.ua/site/css.shtml&amp;amp;xid=17259,15700023,15700124,15700149,15700168,15700173,15700186,15700189,15700191,15700201,15700205&amp;amp;usg=ALkJrhibBegqf8N8tTfEajH4ZzLKWSloLg#&gt;Раздел 7&lt;/a&gt;&lt;/p&gt; &lt;p align=justify&gt;Реальность представляет принцип восприятия. Интеллект не так уж очевиден...&lt;/p&gt; &lt;/div&gt; &lt;div id=rightmenu&gt; &lt;p align=justify&gt;&lt;strong&gt;Наши новости&lt;/strong&gt;&lt;/p&gt; &lt;p align=justify&gt;Боль методологически фокусирует закон внешнего вселенной...&lt;/p&gt; &lt;p align=justify&gt;Согласно взгляду известных философов современная ситуация...&lt;/p&gt; &lt;/div&gt; &lt;div id=footer&gt;&lt;p align=justify&gt;© 2005 Все тексты любезно предоставлены Яндексом®: &lt;a href=http://translate.googleusercontent.com/translate_c?depth=1&amp;amp;hl=ru&amp;amp;prev=hp&amp;amp;rurl=translate.google.com&amp;amp;sl=ru&amp;amp;sp=nmt4&amp;amp;tl=en&amp;amp;u=http://www.shram.kiev.ua/click%3Fhttp://yandex.ru/vesna.html&amp;amp;xid=17259,15700023,15700124,15700149,15700168,15700173,15700186,15700189,15700191,15700201,15700205&amp;amp;usg=ALkJrhiFBSleJ4eFTqw4emKOz-MArvochw&gt;http://yandex.ru/vesna.html&lt;/a&gt;. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</code>

The first step is to declare the type of act, otherwise the layout will become incorrect (in the style of Internet Explorer 5) displayed in IE 6 also Opera. With an error-free DOCTYPE, there is no problem.

The <link> tag loads CSS styles from external files to the page. The general style.css style lies at the root of the site (as the position, this folder / public_html) is also intended for computer browsers (media = "screen"). The style print.css will be used for printing, about it just below. Next, using JavaScript, we define the user's browser, if it's Internet Explorer 5, it is given a CSS style from the file ie5.css.

The first is the div block header, intended for the page title. There is no text in the main service block, but it contains 4 blocks: content for the main text of the page, leftmenu is also rightmenu for the left also the right menu, respectively, also a block of footer for the "basement" of the layout.

All the blocks are only defined in XHTML code, for their properties also the location gives the answer to CSS.

General CSS style

body { margin: 0px; padding: 0px; background-color: #f0f0f0; }

The first step is to define the style of the <body> (that is, the browser window) - remove the outer ones as well, and add the background paint (# f0f0f0 - light gray).

#header { width: 98%; margin: 0px; padding: 1%; background-color: orange; }

For the header block, the outer indents (margin: 0px;) are removed, the orange fill is also the width of 100% of the parent element (it is <body>). 100% is made up of 98% of the content of the block also 1% for padding-left, also padding-right. Shortened padding: 1%; Specifies an indent from all four sides (top, left, bottom, right).

The unit will be located in a normal flow, which we are satisfied with so far, so there is no need for positioning.

#main { position: relative; width: 100%; margin: 0px; padding: 0px; background-color: #ccc; overflow: hidden;

The main service block is the container of the remaining blocks with content. It does not have borders as well, but width: 100% - therefore, the width of main is equal to the width of the browser window. In the block there is no text, but it is very important for our layout. First, to fully position the CSS blocks of the right, also the left menu, and secondly, to create a gray (#ccc) menu background to the full height of the page.

As mentioned, position: relative denotes the displacement of the block relative to its location in the normal stream. But once the size of the displacement is not set, the block will be located similar to the normal CSS stream. Ad position: relative; It is necessary to fully position the side menu blocks. As you remember, full positioning in CSS is counted from the browser window or the parent block, which is full or relatively positioned.

The main background is gray. This is done for the filled-in over painting of the side menu blocks. In CSS, judging by everything, you can not set the height of the block as a percentage of the browser window, so the height is determined depending on the capacity of the content. That is, the side columns of the menu will have different heights, and also setting the background for them does not have any sense. Therefore, we fill the background with main. Next, fill in the other color with the content block, also the "basement" of the layout, but the columns with a transparent background will visually be the same height. Cheap is also angry.

Overflow property : hidden; it is necessary to remove the IE6 trivial bug. Internet Explorer 6 running Windows XP with an XP screen theme (in the case of the classic Windows theme everything is fine) thinks that the page does not fit completely in the browser window and also adds a horizontal scrollbar. Scrolls only 1-2 pixels, apparently XP-theme increases the width of the elements of the browser interface, but it (the browser) does not realize it in any way ...

Anyway, overflow: hidden; indicates that the content that extends beyond the edges of the container (the life example is a very long expression in a narrow CSS block) is truncated, and the user is not given the opportunity (scroll bars, for example) to see this content. In our case, the container is the main block, 100% wide in the browser window, but the contents are nested blocks.

#content { width: 58%; margin: 0px 20% 0px 20%; padding: 1%; background-color: #f0f0f0; } #footer { width: 58%; margin: 0px 20% 0px 20%; padding: 1%; background-color: orange; }

CSS blocks of the main content are also "basement". Light gray background for easy reading - the snow-white background is also black font extremely contrasting can also be weary of the eye. The footer uses orange. Otherwise, the CSS description of the blocks is the same.

Both occupy the entire width of the page. The width of the content is 58%. External indentation (the abbreviated record is used in the format - margin: top left bottom right;) 20% on the left and 20% on the right. Plus, the internal filling of the content from the frame of the block in 1% from above, from the left, from the right also from below. Consider the horizontal size of the CSS block from left to right: 20% + 1% + 58% + 1% + 20% = 100% .

Thus, the width of the footer also content is 100% of the parent main block, which in turn takes 100% of the body. Nuance - the margin margin is 20% on each side, the outer indentation of the block is transparent, that is, the color is not poured. CSS content blocks also the footer occupy the entire width of the window, and so far it is not entirely clear in what place to take the room for the side menus.

#leftmenu { position: absolute; top: 0px; left: 0px; width: 18%; margin: 0px; padding: 1%; } #rightmenu { position: absolute; top: 0px; right: 0px; width: 18%; margin: 0px; padding: 1%; }

The answer is in position: absolute. For a complete positioning, the normal flow is also not affected by other CSS blocks. A speckle of counting is required, the vertical displacement size is also horizontal, and the width of the block. The starting point can be a browser window, a full or relatively positioned parent CSS block. Now it is clear why for the main block we used position: relative also zero offset.

The leftmenu block (left navigation bar) is positioned from the CSS of the main block, the top offset is also on the left - 0 pixels. For rightmenu the same offset, but from above also to the right. The width of both blocks is 20% (1% padding-left + 18% width + 1% padding-right) from the parent main. In fact, the leftmenu are also rightmenu superimposed on the content blocks also the footer - more precisely, on their transparent outer edges of the margin!

The height of the sidebars depends on the content. The menu does not have a background color, so the background for them is the gray fill of the main block. The margins of the content are also transparent. Due to this, visually side menus have the same height and are grayed.

#content p, #leftmenu p, #rightmenu p { margin-top: 0px; } #header p, #footer p { margin-top: 0px; margin-bottom: 0px; }

Final touches. Inside the blocks, the information is divided into paragraphs by the <p> tag. <p> is a block element that has its own external fields. Internet Explorer 6 combines margin also padding our CSS blocks. Opera also Mozilla sums them up, resulting in an extremely impressive "chopping" of text from above also from the bottom of the block boundaries. This code removes vertical outer indents for elements nested within CSS layout blocks.

CSS style for Internet Explorer 5

Our layout is easily displayed in Internet Explorer 6 also in the latest versions of Mozilla also Opera. But Internet Explorer 5 has its own look at CSS:

Erroneous finishing of our CSS coding with Internet Explorer 5

According to the more popular "counters" Runet - spylog, hotlog is also liveintenet - Internet Explorer 5 is running around 18% of users, so you can not refuse to support this browser, unfortunately.

The solution is obvious - for the wrong browser we do the wrong CSS, and we connect this manner only for the 5th version of the patient.

<script language="javascript" type="text/javascript"> //<![CDATA[ if (navigator.userAgent.indexOf('IE 5')!=-1) document.write('<link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" />'); //]]> </script>

using JavaScript, we define the user's browser, if it's IE5, we enter the link to the CSS file ie5.css into the page code (using the same script).

#header { width: 100%; } #content, #footer { width: 60%; } #leftmenu, #rightmenu { width: 20%; padding-left: 10px; padding-right: 10px; } #rightmenu{ left: 80%; }

According to the specification, the space occupied by the CSS block is computed horizontally by the formula: margin-left-border-left-padding-left-width-padding-right-border-right-margin-right. The width of the content (text, pictures, flash-objects ...) is specified by the width parameter.

IE5 considers that width specifies the width of all visible elements of the block (the visible part is all in addition to the margin), however, the result of subtracting the padding values ​​from the width of the padding is also border. So, you need to specify the wrong width for all the blocks by the formula - the space occupied minus margin-left minus margin-right.

Another bug - the text of the side menu "sticking" to the outskirts of the block. It can be seen that there is a padding from the edge of the block up to the content (vertically), but horizontally - no. It is inherent only in the side menu (the reason, most likely, in the full positioning of these CSS blocks), only for horizontal padding is also only if they are specified in percentage. Set the padding to the left also to the right for the side menu in pixels, ten should suffice.

Also in the screenshot, you can see that the left one is also stacked one on the other. IE5 does not in any way handle the CSS right property, with which we position the rightmenu block horizontally. It is necessary to prescribe for him the displacement already on the left by 80% (60 + 20 - why so much, I think, is also so clear).

CSS for printing pages

CSS layout for printing

The layout specifies a style pair for different display devices:


style.css for browsers (media = "screen"), but print.css for printers (media = "print"). Accordingly, the data CSS styles buddy with a friend are not related, they also describe the page each in its own way. The style for print.css will become utterly unsophisticated:

body, #header, #main, #content, #footer { color: #000; background-color: #fff; } a { color: #000; } #leftmenu, #rightmenu { display: none; }

We set the snow-white background for the blocks, the text elements are made black. Hyperlinks (<a>) are similar to black. Agree, for the conclusion to print it is reasonable.

using the display: none directive; completely removed lateral menu. Obviously, the page will be printed for the main text, the title is similar in no way prevents. "Cellar" remains when printing, if necessary, you can always always delete it.

Conclusion

We have obtained a page layout in 3 columns, this layout is completely described by means of CSS, and also XHTML is also slightly "diluted" with JavaScript. Advantages are also disadvantages of this method. CSS layouts are described above (by the end of the article you can also forget it - it did not turn out very shortly, I agree).

It remains to choose the font and color "to taste", attach to the "rubber" layout does not less "rubber" font size, to think about the design of headings, will also get a normal design of the information site, fully implemented in CSS. What was also required to prove :)