Tato verze třísloupcového layoutu si vzala to nejlepší z ostatních technik tvorby třísloupcových layoutů. Nejdůležitější přednost tohoto řešení spočívá v tom, že hlavní panel je v kódu dříve než levý a pravý panel, což ocení především příznivci SEO – obsah stránky (text stránky) je v kódu umístěn hned na začátku souboru.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Matthew Levine. Bližší popis najdete v článku In Search of the Holy Grail.

Po vydání původního článku se objevila řada různých problémů s některými prohlížeči, především IE7. Zde uváděné řešení se je snaží reflektovat. Více informací najdete například v článcích Holy Grail on A List Apart, The Case of the Disappearing Column a The Holy Grail CSS Layout Fix for IE7.

CSS

body
{
  min-width: 630px; /* 2 x (LC plna-sirka + CC padding) + RC plna-sirka */
}
#container
{
  padding-left: 200px; /* LC plna-sirka */
  padding-right: 190px; /* RC plna-sirka + CC padding */
  position: relative; /* Resi „nekonecnou“ stranku v IE7 */
}
#container .column
{
  position: relative;
  float: left;
}
#center
{
  padding: 10px 20px; /* CC padding */
  width: 100%;
}
#left
{
  width: 180px; /* LC width */
  padding: 0 10px; /* LC padding */
  right: 240px; /* LC plna-sirka + CC padding */
  margin-left: -100%;
}
#right
{
  width: 130px; /* RC width */
  padding: 0 10px; /* RC padding */
  margin-right: -100%;
}
#paticka-uvnitr
{
  clear: both;
}
/*** oprava pro IE ***/
* html #left
{
  left: 150px; /* RC plna-sirka */
}
/*** Stejna vyska sloupcu ***/
#container
{
  overflow: hidden;
}
#container .column
{
  padding-bottom: 1001em; /* X + padding-bottom */
  margin-bottom: -1000em; /* X */
}
/*** oprava paticky ***/
* html body
{
  overflow: hidden;
}
* html #paticka
{
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #FFF; /*** Stejne jako u body ***/
}
/*** Jen pro vzhled ***/
body
{
  margin: 0;
  padding: 0;
  background: #FFF;
}
#hlavicka, #paticka-uvnitr
{
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background: #999;
}
#left
{
  background: #66F;
}
#center
{
  background: #DDD;
}
#right
{
  background: #F66;
}
#container .column
{
  padding-top: 1em;
  text-align: justify;
}

XHTML

<html>
  <head>
    <title>Třísloupocový layout – svatý grál — Interval.cz</title>
  </head>
  <body>
    <div id=“hlavicka“>Toto je hlavička stránky.</div>
    <div id=“container“>
      <div id=“center“ class=“column“>
        <h1>Toto je hlavní panel</h1>
        <p>Lorem ipsum… </p>
      </div>
      <div id=“left“ class=“column“>
        <h2>Toto je levý panel</h2>
        <p>Lorem ipsum… </p>
      </div>
      <div id=“right“ class=“column“>
        <h2>Toto je pravý panel</h2>
        <p>Lorem ipsum… </p>
      </div>
    </div>
    <div id=“paticka“>
      <div id=“paticka-uvnitr“>Toto je patička stránky.</div>
    </div>
  </body>
</html>

7 Příspěvků v diskuzi

  1. Jen par drobnosti:
    – pokud je v prostredni sloupci treba obrázek kvůli kterému se celá stránka nevleze na monitor tak se obrázek ořízne
    – odkazy s kotvou #neco posunou obsah sloupce a ne celou stránku
    jinak v pohode

  2. Hlavní nedostatek vidím v omezení funkčnosti na výšku hlavního bloku na 1000em. Tato hodnota jde sice libovolně zvyšovat, ale pro IE7, jak jsem si ověřil, je maximem -32768px, pak už dejde k přetečení.

    padding-bottom: 1001em;
    margin-bottom: -1000em;

  3. zdravim, chtel bych se zeptat jestli by slo nejak uzamcit bocni panely,aby se pri mensim rozliseni stredni panel nezakryval bocnima.diky

Odpovědět