O webu
Stejně vysoké sloupce

Obrázkové pozadí

Řešení spočívá v nastavení obrázkového pozadí (použitý obrázek) společnému rodiči obou sloupců (sloupce jsou obtékané), obrázek na pozadí se svisle opakuje (repeat-y) a vytváří tak dojem skutečných sloupců.

Krátký text

Více

krátkých

odstavců

Podívejte se, jak to bude vypadat s a bez obrázku:

Rámeček mezi sloupci

Pokud nepotřebujeme podbarvení sloupců, ale stačí oddělení rámečkem, vystačíme si i bez obrázků. A to tak, že levý i pravý sloupec bude mít nastaven levý, respektive pravý rámeček shodné barvy a jeden ze sloupců se o šířku rámečku posune, aby se rámečky překrývaly.

Posunutí lze vytvořit například relativním posicováním.

.levy {position: relative; left: 1px}

Krátký text

Více

krátkých

odstavců

Jak by to vypadalo s a bez posunutí:

Absolutní posicování

Dosáhnout shodně vysokých sloupců je možné i absolutním posicováním.

V případě, že víme, že jeden sloupec bude vždy vyšší než druhý. Necháme ten delší natáhnout rodiče a ten kratší roztáhneme absolutním posicováním a třeba height: 100%.

Krátký text

Více

krátkých

odstavců

Pseudo-elementy

Simulovat sloupce je možné i pseudo-elementy (before/after). Kdy se pomocí z-indexu umístí za sloupce absolutně posicované barvy, které se roztáhnou po celé výšce. Toto řešení funguje od IE 8.

Samostatná ukázka.

Dopočítání výšky JavaScriptem

Lze využít toho, že JS může přeměřit oba sloupce (offsetHeight) a vyšší hodnotu potom nižšímu sloupci nastavit. Nevýhoda může být, že takový rozměr přestane platit, pokud se na stránce bude s něčím manipulovat (třeba skrývat a odkrývat).

Sloupce, kterým se srovnává výška, musí být jen obaly, pokud jim přidáme v obsahovém box modelu (výchozí ve standardním režimu) padding nebo border, přestane toto řešení fungovat.

Krátký text

Více

krátkých

odstavců

Flexboxy

Jak je vidět, všechna řešení nejsou moc elegantní. Ovšem je tu naděje v podobě flexboxů — problematická podpora napříč prohlížeči (k disposici až od Internet Exploreru 10), ale zatím celkem brání rozumnému používání.