Sloupce stejně vysoké

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ů.

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

Přepnout obrázek

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}

Jak by to vypadalo s a bez posunutí:

Přepnout 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%.

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.

Původní výšky & prohodit Srovnat

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í.