CSS Tip: 33% šířky elementu

Možná jste někdy chtěli vytvořit webovou stránku rozvrženou do 3 sloupců. Na tom nic těžkého není. Možná jste však potřebovali, aby tato stránka neměla pevně zadané rozměry a mohla se tak roztahovat dle velikosti okna. Pokud ano, jistě oceníte následující poznatek.


Zjednodušeně byste pravděpodobně měli HTML konstrukci typu:

<div id="container">
    <div class="third"> Sloupec 1 </div>
    <div class="third"> Sloupec 2 </div>
    <div class="third"> Sloupec 3 </div>
</div>


a CSS:

.container {

    width: 100%;

}

.third {
    width: 33.3%;
    float: left;
}


Problém tohoto řešení je to, že se divy nikdy neroztáhnou přes celý obsah a vždy zde bude chybět jeden pixel úplně vpravo a to i v případě, že je šířka nadřazeného elementu dělitelná 3 beze zbytku. To je způsobeno nedostatečnou přesností hodnoty 33.3 periodické. Pro div #container o velikosti 900px to tedy znamená (900/100)*33.3 = 299.7 pro jeden element. Máme 3 elementy vedle sebe tudíž: 299.7 * 3 = 899,1.Prohlížeč při vykreslování zaokrouhlí hodnotu dolů na 899px, které se zobrazí na obrazovce. Jak vidíme rozdíl dělá jeden pixel, kterého se s konstantou 33.3 nikdy nezbavíme.

Úkol byl tedy jasný. Najít konstantu, která tímto netrpí. Po chvilce testování jsem tedy došel ke konstantě:

.third {

    width: 33.33334%;
    float: left;
}

Díky konstantě 33.33334% se ve skutečnosti spočítá šířka divu o sto tisícinu pixelu větší, než bychom potřebovali. Naštěstí nám to vůbec nevadí, protože ji prohlížeč při vykreslování zaokrouhlí dolů. Takto budete mít klid dokud nebude div #container širší než 100 000px (snad je to dostatečná rezerva). Pokud byste použili větší hodnotu, poslední sloupec by přetekl přes nadřazený element a zobrazil se až na dalším volném místě (čili někde pod prvním sloupcem). To snad ale u webových stránek v blízké době nehrozí.

Doufám, že Vám tato informace bude užitečná.