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

CSS site layout: three-column layout

Our layout

Task

Our task is to create a layout in three columns using CSS. This layout can serve as the basis for an informational site with a “header”, the right is also left columns for the menu as well as additional information, with the central block of text also the “basement” for copyrights, contacts as well as other things. Typical content project layout.

Undoubtedly, this layout cannot be called a miracle of a design duma, but you can always practically bring this template into the “divine form”, choosing the right fonts, their size, adding a beautiful logo as well. It is not difficult to independently complicate the layout, adding new CSS blocks.

Site layout in three columns completely on CSS

Technologies used also browser support

The layout of the site will be implemented entirely in CSS, it is planned to use “sporadic” use of XHTML and JavaScript.

The CSS layout used is supported by Internet Explorer 6, 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 be liking text browsers to other exotic devices as well.

The performance of the code in IE 4, Netscape 4 is also not tested in older browsers, but I am sure there will be problems. However, this is uncritical, look at the popularity statistics of browsers from hotlog, spylog also liveintenet.

Advantages and disadvantages of the considered method of CSS site layout

The layout has serious advantages as well rather serious drawbacks. You need to decide what is more important for your site and its visitors.

Disadvantages:

  • Does not work in Internet Explorer 4, Netscape Navigator 4 is also older browsers.
  • CSS layout (the creation of blocks and their positioning) is supported by modern browsers in no way ideal, so the page should be tested in all browsers used by your room for minor but unpleasant differences in the page display.
  • Flour with vertical positioning is also the definition of the height of elements in CSS. This is not so proud, unless you are in any way a fan of fitting all elements with pixel precision.
  • 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 vertical design. If the pages are written manually (and not generated by scripts in any way), then the room can be “finished off” with line breaks.
  • It is difficult to relearn from tabular layout. At first, the paddings will start to have a headache from the margins :)

Plus:

  • Having mastered CSS layout, it is easy to understand the code, change styles. With a well-thought-out CSS block arrangement, minor design changes will probably not be difficult in any way - it’s enough to edit the CSS file.
  • Text browsers are also forced to like our layout for other limited devices for entering into information - without styles, it is a simple text in one column with a minimum number of XHTML design elements.
  • Without CSS styles (that is, a neat XHTML) layout - this is the title of the page at the very top, also the main text that follows the title. “Requirement” (links, copyrights, navigation, news - everything that is NOT why the user came to the page) is slowing down at the very bottom. This arrangement of information will have a beneficial effect on the attitude to the site of simple devices for entering into information, the very essence of the search robots - they love what time the text is on the page, but not the eternal tabular tags.
  • Fast browsing. In the case of impressive pages or slow connection, the visitor can begin to pronounce the main text, while the side menus are also being loaded, etc.
  • "Rubber" layout - the width of the layout blocks depends on the size of the browser window, thus, the useful screen space will not disappear.
  • Easy implementation for this CSS layout of the printable version of the page.
  • Pure XHTML code is also designed using CSS, but not tables - this is “cool” and also sharply fashionable. :) .

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

A little theory of CSS site layout (creating and positioning CSS blocks)

There is no desire or possibility to expound the theory in detail. This complex topic is also extensive. I will try to “get rid of” the links and briefly describe what will be directly used in the layout.

So, links:

Now a little away. A block is a rectangular element of a web page, which is specified using block (for example, <div> or <p>) XHTML elements (in a bashurman way, tags). The block takes up some space and ends with a newline; a pair of <div> elements will be located on the page one below the other, because these are block elements. A pair of the element <i> will not be in any way, since these are lower-case elements.

Using CSS, you can define block parameters — outer edges (margins), borders (border), inner margins down to the content (padding), the content width (width). The contents of a CSS block can manifest text, pictures, nested blocks as well as 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 a CSS block creation.

The website www.ilovejackdaniels.com has a useful CSS tutorial, from which we allowed ourselves to cut out the CSS block scheme, not to violate copyrights for, but to heighten convenience. And of course forgive me ilovejackdaniels.com, who also owns all conceivable and inconceivable benefits to this image:

CSS Box Model Schema

The height of the CSS block in practice cannot be defined in any way (we are talking about “rubber” layout), of course, we also don’t 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, the border will not be in any way; we will do everything through padding, also the width - this is also easier and faster.

The CSS layout of the site is “rubber”, that is, its width depends on the available space (size of the browser window), therefore the width and padding are defined as a percentage. Percentages set 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 defined element is embedded (in the layout several <div> will be nested in one parent <div> block).

Blocks are created using CSS defined their properties (padding, width). It is necessary to arrange them correctly on the page. This is also CSS positioning. If there is no way to describe the location of the blocks on the page, they will be displayed by the browser one below the other, according to the schedule of their description in the XHTML code of the page. This arrangement is referred to as normal flow.

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

For position: relative, the starting point is the location of the block in the normal flow. Ie - position: relative; top: 10%; left: 10%; - the unit will also move 10% down also to the right relative to its normal location. If you register the relative positioning also does not set the offset, the block will be located in the normal flow.

For position: absolute, the reference point is an exactly 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 fully or relatively positioned. Offset is similarly determined by pixels or by percentages of the properties top, left, bottom, right.

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

XHTML also CSS layout code

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

Here, further, the “chunks” of the code are also explanations for 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,15700002,15700022,15700186,15700190,15700248,15700253&amp;amp;usg=ALkJrhgB8WdInCRMAfnuV0zCtSeM6t2sqg#&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,15700002,15700022,15700186,15700190,15700248,15700253&amp;amp;usg=ALkJrhgB8WdInCRMAfnuV0zCtSeM6t2sqg#&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,15700002,15700022,15700186,15700190,15700248,15700253&amp;amp;usg=ALkJrhgB8WdInCRMAfnuV0zCtSeM6t2sqg#&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,15700002,15700022,15700186,15700190,15700248,15700253&amp;amp;usg=ALkJrhgB8WdInCRMAfnuV0zCtSeM6t2sqg#&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,15700002,15700022,15700186,15700190,15700248,15700253&amp;amp;usg=ALkJrhgB8WdInCRMAfnuV0zCtSeM6t2sqg#&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,15700002,15700022,15700186,15700190,15700248,15700253&amp;amp;usg=ALkJrhgB8WdInCRMAfnuV0zCtSeM6t2sqg#&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,15700002,15700022,15700186,15700190,15700248,15700253&amp;amp;usg=ALkJrhgB8WdInCRMAfnuV0zCtSeM6t2sqg#&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,15700002,15700022,15700186,15700190,15700248,15700253&amp;amp;usg=ALkJrhgWWlBxP85_igaCwTq7ytQzFYAtVA&gt;http://yandex.ru/vesna.html&lt;/a&gt;. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;</code>

The first lesson is declaring the type of act, otherwise the layout will become incorrect (in the style of Internet Explorer 5) displayed in IE 6 also by Opera. With error-free doctype no problem.

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

The first is the header div for the page header. There is no text in the main service block, but 4 blocks are enclosed in it: content for the main text of the page, leftmenu also rightmenu for the left and the right-hand menu, respectively, also the footer block for the “basement” layout.

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

General CSS style

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

The first lesson we will define the <body> style (i.e. the browser windows) - we also remove the outer indents, add background paint (# f0f0f0 - light gray).

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

For the header block, the outer margins were removed (margin: 0px;), an orange fill was selected, and the width was 100% of the parent element (it is <body>). 100% consists of 98% of the width of the block contents, also 1% for padding-left and also padding-right. Abbreviated write padding: 1%; sets indentation on all four sides (top, left, bottom, right).

The block will be located in the normal flow, which we are satisfied with so far, so positioning is not necessary.

#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 also has no borders, but width: 100% - therefore, the width of main is equal to the width of the browser window. There will be no text in the block, but it is very important for our layout. First, for the full positioning of the CSS blocks of the right and left menu, secondly, to create a gray (#ccc) menu background for the entire page height.

As mentioned, position: relative means the offset of the block relative to its location in the normal flow. But once the offset size is not specified, the block will be located similar to the normal CSS flow. Declaration position: relative; necessary for full positioning of 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.

A gray background is set for main. This is done for the filled painting of the side menu blocks. In CSS, apparently, you can not set the height (height) of the block as a percentage of the browser window, so the height is determined depending on the content capacity. That is, the side columns of the menu will have different heights, also setting the background for them does not have any meaning. Therefore, we fill the main background. Next, we will fill the content block with another color as the “footer” of the layout, however, the columns with a transparent background will be visually the same height. Cheap also angry.

The overflow property : hidden; It is necessary to remove the minor IE6 bug. Internet Explorer 6 running Windows XP with the XP screen theme (in the case of the classic Windows theme, everything is fine) believes that the page doesn’t fit completely into the browser window also adds a horizontal scroll bar. Only 1–2 pixels are scrolled, apparently the XP theme increases the width of the browser interface elements, but he (the browser) is in no way aware of this ...

Either way, overflow: hidden; indicates that the content that goes beyond the edges of the container (a vital example is a very long expression in a narrow CSS block) is also truncated to the user in no way (scroll bars, for example) can view 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 the main content is also "basement." A light gray background for readability - a snow-white background and a black font are extremely contrasted and can also bore the eye. Orange is used for footer. The rest of the CSS block description is the same.

Both occupy the full width of the page. Content Width 58%. External indents (the abbreviated notation in the format is used: margin: top left bottom right;) 20% on the left and 20% on the right. Plus, the internal blocking of the content from the frame of the block in 1% from the top, to the left, to the right and to the bottom. We 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 occupies 100% of the body. The nuance - the outer margins of the margin are 20% on each side, the outer margins of the block are transparent, that is, they are not filled with color. The CSS content blocks also footer occupy the entire width of the window, and so far it’s not at all clear 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 full positioning, the normal flow and other CSS blocks do not matter in any way. A mottle of reference is needed; the size of the vertical offset is also the width of the block. The starting point may be a browser window, fully or relatively positioned parent CSS block. Today it is clear why we used position: relative for the main block also zero offset.

The leftmenu block (left navigation panel) is positioned from the main CSS block, and the offset from the top also to the left is 0 pixels each. For rightmenu the same offset, but at the top is also on 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 also rightmenu are superimposed on the content blocks also footer - more precisely, on their transparent outer edges of the margin!

The height of the side menu depends on the content. Menus do not have a background color, so the background for them is the gray fill of the main block. Content margins are also footer transparent. Thanks to this, the visual sidebars have the same height and are also filled with gray.

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

The 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 the margin and padding of our CSS blocks. And Opera also Mozilla summarizes them, the result is an extremely impressive "jabbering" of the text above and also below the block boundaries. This code removes vertical outer indents for elements embedded in CSS blocks of the layout.

CSS style for Internet Explorer 5

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

Wrong decoration of our CSS layout with Internet Explorer 5

According to the more popular Runet readers, spylog, hotlog is also liveintenet - Internet Explorer 5 is used by approximately 18% of users, so, unfortunately, you cannot refuse to support this browser.

The solution is obvious - for the wrong browser we do the wrong CSS and also connect this style 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 is IE5, enter the link to the IE5.css CSS file in 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 horizontal space occupied by the CSS block is calculated by the formula: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. In this case, the width of the contents (text, pictures, flash-objects ...) is specified by the width parameter.

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

Another bug - the text of the side menu "sticks" to the outskirts of the block. It can be seen that from above (vertically) there is indentation (padding) from the side of the block down to the content, but horizontally it does not. This is peculiar only to the side menu (the reason, most likely, in the full positioning of these CSS blocks), only for horizontal padding, also only if they are indicated in percentages. We set indents on the left also on the right for side menus in pixels, ten should be enough.

Also on the screenshot it can be seen that the left and right columns are superimposed on one another. IE5 does not handle the CSS right property in any way, by which we position the rightmenu block horizontally. It is necessary to prescribe for him the offset already at the left by 80% (60 + 20 - why exactly so much, I think, it is also so clear).

CSS to print pages

CSS layout for printing

The layout shows a pair of styles for different display devices:


style.css for browsers (media = "screen"), but print.css for printing devices (media = "print"). Accordingly, the CSS data styles buddy with a friend are not connected in any way also describe the page each in its own way. The style for print.css will be extremely unsophisticated:

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

Set the snow-white background for the blocks, make the text elements black. Hyperlinks (<a>) will be similar in black. Agree, for the conclusion on the seal it is reasonable.

with the directive display: none; completely removed the side menu. Obviously, the page will be printed for the main text, the title does not hurt in any way. The “basement” remains when printing; in case of need, you can always remove it as well.

Conclusion

We have a page layout in 3 columns, this layout is completely described by CSS and also slightly “diluted” XHTML and JavaScript. The advantages and disadvantages of this method of CSS layout are described above (by the end of the article you can also forget about something - it didn’t work out very well, I agree).

It remains to choose the font as well as the colors “to taste”, attach to the “rubber” layout no less than “rubber” font size, think about the design of the headings, you also get a normal design of the information site, fully implemented in CSS. What was also required to prove :)