Aby przygotować szablon strony z czterema kolumnami ustawionymi obok siebie, można posłużyć się stylem CSS
A.
.kolumny { float: right; height: 25%; }
B.
.kolumny { float: left; width: 25%; }
C.
.kolumny { clear: both; height: 25%; }
D.
.kolumny { float: left; width: 40%; }
Styl .kolumny { float: left; width: 25%; } poprawnie tworzy układ czterech kolumn obok siebie, ponieważ każdy element zajmuje dokładnie jedną czwartą szerokości dostępnego kontenera. Skoro 100% szerokości dzielimy na 4 równe części, wychodzi 25% na jedną kolumnę. Właściwość float: left powoduje, że elementy ustawiają się od lewej strony i następne elementy mogą opływać poprzednie, więc w praktyce kolejne bloki z klasą .kolumny ustawią się w jednym rzędzie, o ile mieszczą się w szerokości rodzica. To klasyczny sposób budowania layoutów w CSS, szczególnie w starszych projektach albo na egzaminacyjnych przykładach. Trzeba jednak pamiętać o detalach: padding, border i marginesy mogą zwiększyć faktyczną szerokość elementu, jeśli nie zastosuje się box-sizing: border-box. W praktyce często dodaje się też clearfix dla kontenera, bo elementy pływające wypadają z normalnego przepływu dokumentu. Moim zdaniem warto znać floaty, nawet jeśli dziś częściej używa się Flexboxa albo CSS Grid, bo dużo istniejących stron nadal korzysta z takich konstrukcji.
W tym zadaniu najważniejsze jest zrozumienie różnicy między szerokością kolumny a jej wysokością oraz tego, jak działa opływanie elementów w CSS. Jeżeli chcemy uzyskać cztery kolumny ustawione obok siebie, musimy sprawić, aby każdy blok miał odpowiednią szerokość i był ustawiany w poziomie. Sama wysokość 25% nic tutaj nie daje, bo height określa rozmiar pionowy elementu, a nie to, ile miejsca zajmie on w rzędzie. To dość częsty błąd: ktoś widzi liczbę 25% i myśli, że skoro są cztery kolumny, to każda wartość 25% będzie dobra. Ale w układzie kolumnowym liczy się przede wszystkim width, nie height. Użycie float: right może ustawić elementy przy prawej krawędzi, ale bez width: 25% nie zapewni równego podziału na cztery części. Z kolei clear: both działa wręcz przeciwnie do budowania kolumn obok siebie, bo wymusza rozpoczęcie elementu poniżej wcześniejszych elementów pływających. Czyli zamiast układu poziomego dostalibyśmy raczej przerwanie opływania. Szerokość 40% też nie pasuje, bo cztery takie bloki dałyby razem 160%, więc nie zmieszczą się w jednym wierszu kontenera i część elementów spadnie do następnej linii. Z mojego doświadczenia najbezpieczniej przy takich zadaniach zrobić szybki rachunek: 4 kolumny × 25% = 100%. Dopiero potem patrzeć, czy użyta właściwość CSS rzeczywiście odpowiada za układ poziomy.