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 a basis for an informational site with a “header”, the right is also left columns for a menu as well as additional information, with the central block of text also a “basement” for copyrights, contacts as well. Typical content project layout.

Undoubtedly, this layout cannot be called a miracle of a design duma, but you can always bring this template to the “divine look”, choosing the right fonts, their size, adding a beautiful logo as well. It will not be difficult to independently complicate the layout, add 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 work also 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'm sure there will be problems. However, this is uncritical, look at the popularity statistics of browsers from hotlog, spylog and liveintenet.

The advantages and disadvantages of the considered method 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 small 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 the 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 get sick 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 hardly 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 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 dedicated to Windows 3.11 also the corresponding room, if you are ready to master the CSS block model, you also do not intend to add complex elements with non-standard layout to the layout, you can say further.

A bit of CSS theory of website layout (creating CSS positioning blocks as well)

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 outline 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 determine the parameters of the blocks - outer edges (margin), 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 almost 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, the <body> tag) or any block element in which the designated 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 you do not 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 - 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,15700021,15700124,15700149,15700186,15700190,15700201,15700237,15700242&amp;amp;usg=ALkJrhhW2Q1M3p7zQreTDTDbDxCNzj-XKg#&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,15700021,15700124,15700149,15700186,15700190,15700201,15700237,15700242&amp;amp;usg=ALkJrhhW2Q1M3p7zQreTDTDbDxCNzj-XKg#&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,15700021,15700124,15700149,15700186,15700190,15700201,15700237,15700242&amp;amp;usg=ALkJrhhW2Q1M3p7zQreTDTDbDxCNzj-XKg#&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,15700021,15700124,15700149,15700186,15700190,15700201,15700237,15700242&amp;amp;usg=ALkJrhhW2Q1M3p7zQreTDTDbDxCNzj-XKg#&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,15700021,15700124,15700149,15700186,15700190,15700201,15700237,15700242&amp;amp;usg=ALkJrhhW2Q1M3p7zQreTDTDbDxCNzj-XKg#&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,15700021,15700124,15700149,15700186,15700190,15700201,15700237,15700242&amp;amp;usg=ALkJrhhW2Q1M3p7zQreTDTDbDxCNzj-XKg#&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,15700021,15700124,15700149,15700186,15700190,15700201,15700237,15700242&amp;amp;usg=ALkJrhhW2Q1M3p7zQreTDTDbDxCNzj-XKg#&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,15700021,15700124,15700149,15700186,15700190,15700201,15700237,15700242&amp;amp;usg=ALkJrhiLPt0WiaQ58KnkvbUK58fLeCWOmg&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 right 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 remove the outer inner padding as well, 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, as well as the width of 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 margins, but width: 100% - therefore, the main width is equal to the width of the browser window. There is 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 scroll, apparently the XP theme increases the width of the interface elements of the browser, 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 (using abbreviated notation in the format - 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 CSS block horizontal size from left to right: 20% + 1% + 58% + 1% + 20% = 100% .

Thus, the width of the footer and 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, i.e. 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 speck of reference is needed; the size of the vertical displacement is also horizontal, and 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 as well as 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. Due to this, the visual side menu 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 borders of the block. This code removes vertical outer indents for elements embedded in CSS blocks of the layout.

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:

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 are doing 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 in the code of the page (using the same script) a link to the CSS file ie5.css.

#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, 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 up 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 as well on the right for the 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 “footer” remains at printing, in case of need you can always remove it, as well.

Conclusion

We have a page layout in 3 columns, this layout is fully 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 also to the colors “to taste”, attach to the “rubber” layout no less than “rubber” font size, think over 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 :)