Převod sloupců na procenta

Při převodu starého webu na responsivní je typicky nutné převést pevný vícesloupcový layout v pixelech na procenta, která se dokáží přizpůsobovat aktuálně dostupné šířce.

V podstatě k tomu stačí kalkulačka a schopnost počítat s procenty.

Kalkulačka

Pro zrychlení procesu jsem si vytvořil automatický převodník v JavaScriptu:

Drobná mezera

Pokud procentuální hodnota vyjde s hodně desetinnými místy, může být problém se zaokrouhlováním, kdy ve finále nedají sloupce dohromady přesně 100 %.

První řešení je lehce změnit poměr sloupců použitím hodnot v procentech bez desetinných míst.

V případě obtékaných (float: left) sloupců většinou vadí mezera vpravo za posledním blokem, takže pro poslední sloupec stačí použít float: right. Zaměřit poslední sloupec jde od IE 9 CSS selektorem :last-child:

.sloupec {
  float: left;
} 
.sloupec:last-child {
  float: right;
}