Table of contents icon

Obserwuj @varjs

Układ kolumnowy - float

Rozdział 12

W poprzednim przykładzie poznaliśmy między innymi znaczniki <div>. Wiesz już, że nie zawierają one żadnej treści, natomiast służą przede wszystkim jako elementy, dzięki którym możemy wprowadzić zmiany w wyglądzie naszej strony - podzielić je na większe sekcje, wiersze, czy zrobić na przykład układ kolumnowy.

Do tej pory udało nam się uzyskać widok artykułu, stworzyć menu oraz formularz do komentowania. Umieśćmy je wszystkie w jednym, 3-kolumnowym układzie (layoucie). Niech menu znajdzie się po lewej, w środku artykuł wraz z formularzem, a z prawej na przykład lista materiałów powiązanych z artykułem. Sprawmy, by cała strona miała maksymalnie 960 pikseli szerokości i była wyśrodkowana.

Spróbujmy znów podzielić to, co widzimy na grafice, na funkcjonalne części które odwzorujemy w HTML-u. Mamy więc lewą kolumnę z menu, środkową z główną treścią strony oraz prawą, z krótkim tekstem. Całość zaś musi być wyśrodkowana i mieć maksymalnie 960 pikseli szerokości. Bardzo dobrym pomysłem jest stworzyć dodatkowo element, który będzie rodzicem dla tych trzech kolumn.

Będzie on przydatny dlatego, aby ustaić szerokość strony na 960 pikseli. Nie posiadając takiego elementu nadrzędnego ciężko byłoby też wyśrodkować wszystkie 3 kolumny. Niech naszym kontenerem będzie zwykły <div>, ponieważ nasz "pojemnik na kolumny" nie pełni on żadnej, semantycznej funkcji w dokumencie. Dzięki temu, że będzie on elementem rodzicem, będziemy mogli nadać mu własności CSS takie jak szerokość i wyśrodkowanie, niniejszym wszystkie inne kolumny w nim się znajdujące też będą wyśrodkowane i będą mieścić się w obrębie 960pikseli. 

<div class="main-container"></div>

Nadałem mu przy okazji klasę "main-container", która odwzorowuje, że jest to główny kontener na inne elementy na naszej stronie.

Następnie należy umieścić menu. Będzie ono stanowiło boczną kolumnę. Jak pamiętamy, do nawigacji na stronie używamy <nav>, który ostylujemy tak, by pełniło rolę bocznej, lewej kolumny. Użyjmy więc <nav class="site-menu">:

<div class="main-container">
  <nav class="site-menu"></nav>
</div>

Idąc dalej, umieszczamy kontener na główną treść, która będzie w środkowej kolumnie <div class="main-content">:

<div class="main-container">
  <nav class="site-menu"></nav>
  <div class="main-content"></div>
</div>

Następnie pozostała nam prawa kolumna <aside class="sidebar">.

<div class="main-container">
  <nav class="site-menu"></nav>
  <div class="main-content"></div>
  <aside class="sidebar"></aside>
</div>

Teraz przeanalizujmy, cały czas zerkając na obrazek, co powinna zawierać lewa kolumna. Jak nazwa wskazuje, powinno to być nasze menu z poprzedniego rozdziału.

<div class="main-container">
  <nav class="site-menu">
    tu wstaw kod z menu
  </nav>
  <div class="main-content"></div>
  <aside class="sidebar"></aside>
</div>

W środku <nav> celowo nie wstawiłem więcej kodu, ponieważ chciałem zachować jego czytelność. Kiedy będziemy już gotowi, by opublikować naszą stronę, wystarczy skopiować kod menu i wkleić go pomiędzy <nav></nav>.

W środkowej kolumnie będzie natomiast artykuł i formularz do komentowania.

<div class="main-container">
  <nav class="site-menu">
    tu wstaw kod z menu
  </nav>
  <div class="main-content">
    <article>tu wstaw kod artykułu</article>
    <form>tu wstaw kod formularza</form>
  </div>
  <aside class="sidebar"></aside>
</div>

Następnie w prawej kolumnie umieścimy poboczny element, niezwiązany z główną treścią. Niech będzie oznaczony zwykłym divem:

<div class="main-container">
  <nav class="site-menu">
    tu wstaw kod z menu
  </nav>
  <div class="main-content">
    <article>tu wstaw kod artykułu</article>
    <form>tu wstaw kod formularza</form>
  </div>
  <aside class="sidebar">
    <div>tu wstaw kod prawej kolumny</div>
  </aside>
</div>

Wygląda na to, że nasz kod HTML jest gotowy. Po przygotowaniu HTML-a pora na CSS. Naszym pierwszym zadaniem jest ustawić maksymalną szerokość dla głównego diva z klasą main-container:

.main-container {
  max-width: 960px;
}

Posłużyła nam do tego właściwość max-width. Sprawi ona, że cokolwiek by się nie stało, szerokość całego pojemnika z klasą main-container nie może być większa niż 960 pikseli.

Następnie wycentrujmy blok. Służy do tego ustawienie automatycznych marginesów:

.main-container {
  max-width: 960px;
  margin: auto;
}

Dzięki temu przeglądarka weźmie całą wolną przestrzeń pomiędzy .main-container, podzieli ją na dwa i ustawi wynik po lewej i prawej, sprawiając, że element zostanie wycentrowany, bo jego lewy i prawy margines będą miały taką samą wartość. Podobnie, jak na poniższym zrzucie ekranu:

Mając za sobą kod odpowiedzialny za główny kontener, sprawmy teraz, by nasze trzy kolumny były ustawione obok siebie.

Niech pojemnik z menu ma 20% dostępnej szerokości. Robi się to po prostu podając wartość w procentach:


.site-menu {
  width: 20%;
}

Podobną szerokość ustawmy dla prawej kolumny:

.sidebar {
  width: 20%;
}

Jako, że i lewa, i prawa kolumna mają te same właściwości, zgrupujmy je:

.site-menu,
.sidebar {
  width: 20%;
}

Teraz zajmijmy się środkową kolumną. Niech jej szerokość wynosi pozostałe 60%, ponieważ dwie boczne kolumny zajmują w sumie 40%.

.main-content {
  width: 60%;
}

Niestety, nasze kontenery nadal wyświetlają się jeden pod drugim. Aby ustawić je obok siebie, musimy nadać im specjalną właściwość CSS float. Używamy ją do tego, aby powiedzieć przeglądarce, że chcemy, aby dany element był zbliżony do lewej bądź prawej krawędzi kontenera, w którym się znajduje. Gdy w jednym kontenerze ustawimy kilku elementom, by "pływały" do lewej krawędzi, ustawią się one jeden obok drugiego. My sprytnie wykorzystamy ten fakt.

Dzieje się tak dlatego, że lewa kolumna "doklei" się do lewej krawędzi głównego pojemnika, z kolei środkowa do lewej kolumny, ponieważ przy samej krawędzi rodzica (którym jest główny pojemnik .main-container) nie ma już miejsca - zajmie go właśnie lewa kolumna - kto pierwszy, ten lepszy!

Zanim przejdziemy do użycia float w CSS, przedstawię Ci najpopularniejszy przypadek użycia tej własności. Wyobraź sobie, że masz obrazek ustawiony bezpośrednio w tekście:

<p><img src="cat.jpg" alt="angry cat is watching you">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui metus, commodo vitae sem vel, tempus pellentesque nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Etiam consequat, nisi ac cursus mattis, mi eros lacinia tortor, nec pellentesque ligula quam mattis nulla.</p>

Domyślnie taki obrazek wyświetlałby się tak:

Dzieje się to dlatego, że tag <img> jest elementem liniowym i po prostu wstawiliśmy go tak samo jak inny tekst, więc wyświetla się w miejscu, gdzie go umieściliśmy, trzymając się wysokości linii tekstu.

Gdy jednak ustawimy dla obrazka float na wartość right, widzimy już coś znacznie lepszego.

img {
  float: right;
}

Obrazek zaczął "pływać" do prawej krawędzi elementu, w którym został umieszczony – w tym wypadku do krawędzi akapitu <p>. Pozostałą wolną przestrzeń z lewej, jaka została po "odpłynięciu" naszego obrazka, wypełnia natomiast tekst.

Spróbujmy teraz ustawić float na left:

Jak widać, obrazek zaczął "pływać" do lewej krawędzi akapitu, a z prawej zaczął go oblewać naturalnie tekst.

Wracając do przykładu z kolumnami, sprawmy, by wszystkie dążyły w swojej pozycji do lewej krawędzi kontenera:

.site-menu,
.main-content,
.sidebar {
  float: left;
}

Bingo! Zobacz, jak teraz wyświetla to przeglądarka:

Zapytasz zapewne, dlaczego się tak stało. Otóż spróbuj przeanalizować sobie, jak zachował się obrazek, po ustawieniu float na left. Został on wyświetlony jak najbliżej lewej krawędzi, a pozostałą przestrzeń z prawej zaczął wypełniać tekst. Tutaj dzieje się coś podobnego - elementy <div> mają ustawiony "float" na "left", a więc będą dążyć do lewej krawędzi. Pierwszy <div> ustawi się tuż przy niej, kolejny wykorzysta wolną dostępną przestrzeń obok pierwszego. I tak jeden po drugim, dzięki czemu masz wrażenie, że są ustawione obok siebie.

Znakomicie! Uzyskaliśmy właśnie układ kolumnowy. Aby bardziej zobrazować, o co chodzi, dodajmy jeszcze kolory tła dla każdej z kolumn:

.main-content {
  width: 60%;
  background-color: Bisque;
}

.site-menu {
  background-color: LightCyan;
}

.sidebar {
  background-color: Gold;
}

Efekt jest jak najbardziej zadowalający. Doskonale pokazuje, że udało się podzielić główny kontener na kolumny:

Nasz kod CSS wygląda z kolei tak:


.main-container {
  max-width: 960px;
  margin: auto;
}

.site-menu,
.main-content,
.sidebar {
  float: left;
}

.site-menu,
.sidebar {
  width: 20%;
}

.main-content {
  width: 60%;
  background-color: Bisque;
}

.site-menu {
  background-color: LightCyan;
}

.sidebar {
  background-color: Gold;
}

W ten sposób stworzyliśmy prosty układ z trzema kolumnami. Teraz wystarczy wkleić pozostały kod HTML i CSS z poprzednich ćwiczeń. Niech to będzie Twoje zadanie!