English-only | Jenom česky | Bilingual/Dvojjazyčně

Řešení CSS: Dvousloupcový beztabulkový layout

Čas od času můžete na své stránce potřebovat dva sloupce stejné výšky. Pokud se výška jejich obsahu liší, jejich pozadí má pokračovat a končit na stejné pozici. Právě takto jsou sloupce tvořeny pomocí tabulek.

Pro vytvoření dvou sloupců v CSS existuje několik způsobů. Můžeme použít plovoucí blok, oba bloky plovoucí, můžeme pozicovat jeden blok do okraje bloku druhého. V každém případě ale blok skončí tam, kde bude končit jeho obsah. Ale to je v pořádku — ve skutečnosti jsou "sloupce stejné výšky" jen pouhou iluzí: nikoli sloupce, ale pozadí pod nimi tvoří požadovaný efekt. Takže nechejme sloupcům jejich výšku a posléze si pohrajme s pozadím. O to tu jde.

1. Pevná šířka

Nejprve vytvořme samotné sloupce. Použijeme např. plovoucí blok. Na stránce bude mateřský blok nazvaný content a v něm budou dva vnořené bloky: sidebar a main. Blok sidebar má být formátován jako levý, užší sloupec a blok main jako sloupec širší vedle něj. Zásadní otázkou je, zda sloupce mají fixní, nebo pružnou šířku. V prvním případě použijeme šírku fixní: levý sloupec má být široký 200 px.

   #content {
      width: 90%;
      margin:1em auto;
      border: 1px solid black;
      text-align:left;
      max-width: 1024px;
      }
   #sidebar {
      float: left;
      width: 200px;
      margin:0; padding:0;
      }
   #sidebar-content {
      margin:0; padding: 0.5em 1em;
      font-size: 70%;
      }
   #main {
      margin:0 0 0 200px; padding:0;
      }
   #main-content {
      margin:0; padding: 0.5em 1em;
      font-size: 100%;
      }
   hr.cleaner {
      clear:both;
      height:1px;
      margin: -1px 0 0 0; padding:0;
      border:none;
      visibility: hidden;
      }
...

   <div id="content">
   
   <div id="sidebar"><div id="sidebar-content">
   Left column content...
   </div></div>
   
   <div id="main"><div id="main-content">
   Right column content...
   </div></div>
   
   <hr class="cleaner" />
   
   </div>

Použili jsme zde několik triků:

  1. Je zde použita "Matrjoška", abychom zabránili známým problémům s box-modelem.
  2. Plovoucí blok jsme umístili do okraje (margin) bloku druhého. To je nejsnazší způsob, jak umístit obsah dvou bloků vedle sebe.
  3. Najdeme zde cleaner ("čistič"). Zajišťuje, aby byl mateřský blok ukončen až pod dolní hranou plovoucího bloku.

Máme tedy dva sloupce. Podívejte se na Příklad 1.

Abychom je udělali zdánlivě stejně vysoké, stačí vnějšímu bloku přidat vhodné pozadí. Bude se svisle opakovat a vytvářet po levé straně 200 px široký pruh — a tedy požadovaný tvar sloupců.

   #content {
      ...
      background: url('bkgr200.gif') top left repeat-y;
      ...
      }

Podívejte se na Příklad 2.

2. Pružná šířka

Obdobný postup můžeme použít i pokud má být šířka sloupců pružná, zadaná procentně. Trik spočívá v chytrém umístění obrázku na pozadí. Na tenhle nápad přišel Doug Bowman, publikován byl v jeho článku Liquid Bleach.

Řekněme, že chceme layout rozdělit na sloupce v poměru 30:70. Nejprve proto nastavíme šířku bloku sidebar (stejně jako levý okraj bloku main) na hodnotu 30%.

   ...
   #sidebar {
      ...
      width: 30%;
      ...
      }
   #main {
      ...
      margin:0 0 0 30%;
      ...

A teď přijde hlavní finta. Musíme udělat dvě věci:

  1. Připravit si obrázek na pozadí ve stejném poměru jako sloupce. Pokud je tedy poměr sloupců např. 30:70, uděláme levý pruh v obrázku 600px široký a pravou část necháme širokou 1400px (obrázek na pozadí by měl být vždy dost široký).
  2. Umístit obrázek na pozadí v témže poměru.
   #content {
      ...
      background: url('bkgr.gif') 30% 0% repeat-y;
      ...
      }

To zajistí, že hranice mezi sloupci je vždy (poměrně) ve stejné pozici, když se šířka sloupců bude měnit (jak je znázorněno na obrázku níže). Podívejte se na Příklad 3, kde můžete vidět toto řešení v praxi.



Obr. 1: Umístění pozadí v daném poměru

Můžeme použít i zjednodušenou verzi pozadí a obrázkem podložit jen jeden sloupec (zbytek pozadí bude průhledný) — řešení je ale stále totéž. Úspěšně jsem je testoval ve všech majoritních prohlížečích (WinIE5, WinIE6, Mozilla, Firefox, Opera, Safari).