Układ kolumnowy na stronie z pomocą float
Dziś zajmiemy się tematyką rozmieszczania elementów na stronie internetowej. Do tego celu na stronach wykorzystuje się elementy takie jak <div>, <header> czy <footer>. Nas dziś będzie interesował <div>.
Istnieje kilka właściwości CSS, które umożliwiają nam ustawianie elementu HTML <div>. W związku z tym, że najlepiej zacząć od podstaw w tym artykule do tego celu będziemy używać właściwości float.
Co znajdziesz w tym wpisie
Jak działa właściwość CSS float
Właściwość CSS float posiada ustawienia takie jak:
- right – czyli do prawej
- left – do lewej
- none – brak (resetuje ustawienia float)
- inherit – ustawienie dziedziczone jest po rodzicu (elemencie nadrzędnym)
Deklaracja właściwości tej wyglądać zaś może np. w ten sposób:
div{
float:left;
}
Przykład:
Style CSS z przykładu:
.container-1{
border:1px solid;
display: inline-block;
width: 100%;
}
.container-1 div{border: 1px solid blue; width:30%;}
.float-left{float:left;}
.float-right{float:right;}
.float-none{float:none;}
Kod HTML:
<div class="container-1">
<div class="float-right">float:right;</div>
<div class="float-left">float:left;</div>
<div class="float-none">float:none;</div>
</div>
Jak widać <div> z ustawieniem float right i left ustawiły się obok siebie, pomimo że są to elementy blokowe. Zmianie uległą też ich kolejność. Jest tak dlatego, że właściwość float może zmienić sposób działania elementów z blokowych na liniowe.

Co chcemy uzyskać
Na potrzeby tego artykułu przygotujemy bardzo prostą stronę internetową posiadającą:
- 3 kolumny
- 2 grafiki w tekście
- kilka akapitów
- nagłówek
- oraz bardzo proste menu

Ustawianie elementów strony obok siebie
Do wykonania podobnego efektu będziemy potrzebowali kilku różnych elementów HTML. Za bazę jednak posłuży nam post – Struktura strony internetowej w HTML5
Znajdziemy tam podstawowe elementy, z których składa się strona internetowa w HTML5 (czyli obecnym standardzie). Na potrzeby naszej witrynki kod ten będziemy musieli jednak trochę zmodyfikować! Zawiera on bowiem elementy, których nie będziemy używać lub użyjemy w innym miejscu.
Budujemy bowiem stronę o nieco innym układzie niż ta z tamtego artykułu. Tak więc nasza podstawa będzie wyglądać po zmianach następująco:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Przykładowa strona</title>
</head>
<body>
<section>
<div class="col-1">kolumna 1</div>
<div class="col-2">kolumna 2</div>
<div class="col-3">kolumna 3</div>
</section>
</body>
</html>
Właśnie utworzyliśmy szkielet naszego layoutu strony. Jak widać brakuje w nim jednak wielu elementów. A w przyszłych kolumnach mamy jedynie napis – „kolumna” + jej numer. Dlatego też spróbujemy zacząć uzupełniać treścią i elementami HTML.
Ustawienie obok siebie kilku kolumn / obiektów
Na początek ustawmy 3 kolumny obok siebie. Możemy tego dokonać poprzez nadanie im odpowiednich szerokości oraz właściwości float np.:
W tym wypadku kolumny nie układają się obok siebie. Spróbujmy więc raz jeszcze:
Teraz kolumny układają się tak jak należy! Nasz kod w tym przypadku będzie wyglądał następująco:
section{
width: 900px;
margin: 0 auto; /* wyśrodkuje kontener */
padding: 0;
}
.col-1, .col-2, .col-3{
float: left;
padding: 15px;
}
.col-1, .col-3{
width: 20%;
}
.col-2{
width: 60%;
}
Tło nie dochodzi do końca?!
Jeżeli po wdrożeniu tego kodu tło / obramowanie nie będzie dochodziło do końca, urywało się w połowie lub od razu u góry wystarczy dodać poniższy kod CSS do obiektu:
display: inline-block;
width: 100%; /* szerokość trzeba dostosować do swoich potrzeb */
Umieścimy je w miejscu napisu „kolumna 1”. Menu będzie znajdowało się pomiędzy znacznikami <nav> i </nav> a oparte będzie o punktowaną listę.
<nav class="menu">
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Podstrona 1</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
Chwilowo mamy więc zwykła listę z hiperłączami. Teraz trzeba będzie ją dostosować do projektu. Elementy układają się już jeden pod drugim dzięki czemu jeden problem mamy z głowy.
Teraz ukrywamy wypunktowanie oraz odstęp od krawędzi:
nav ul{
list-style: none;
padding: 0;
}
Teraz zajmiemy się każdym z przycisków (interesuje nas element <a>). Nie musimy jednak tego robić osobno a użyć nazwy klasy (jeśli jest dodana) lub odwołać się po lokalizacji do konkretnej grupy.
nav ul li a{
display: block; /* zmieniamy element liniowy na blokowy */
padding: 8px;
background: #d98e89; /* dodajemy tło */
text-decoration: none; /* usuwamy podkreślenie tekstu */
color: #333;
text-align: center; /* centrujemy tekst */
border-bottom: 1px solid #fff; /* dodajemy ramkę od dołu */
}
Warto przeczytać:
Skoro mamy już bardzo proste menu pora przejść do kolejnego elementu.
Dodawanie treści
Kod kolumny drugiej będzie więc wyglądał następująco:
<div class="col-2">
<h1>Sed ut perspiciatis, </h1>
<p>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur <b>aut odit aut fugit</b>, sed ut odit aut fugit, sed quia consequuntur magni <i>dolores eos, qui ratione voluptatem sequi nesciunt, neque porro</i> </p>
<img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" class="first-img">
<ul class="left">
<li>Nemo enim ipsam </li>
<li>voluptatem, </li>
<li>quia voluptas sit, </li>
<li>aspernatur a</li>
</ul>
<img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" class="second-img">
</div>
Jak widać dodaliśmy tu dwa akapity <p>, punktowaną listę <ul>, dwie grafiki <img>. Posiadamy też nagłówek <h1>. W tekście pamiętamy o dodaniu w odpowiednich miejscach pogrubień <b> lub <strong> oraz pochylenie <i>.
W projekcie nagłówek <h1> jest wyśrodkowany i pogrubiony. Nagłówki domyślnie są pogrubione dlatego jedynie musimy go wyśrodkować.
h1{
text-align:center;
}
Trzecia kolumna z mniejszym tekstem
W wypadku gdy chcemy aby tekst w 3 kolumnie zawsze był mniejszy możemy ustawić wielkość fontu (potocznie czcionki) dla całej kolumny. Przykładowo:
.col-3{
font-size:14px;
}
Kod HTML:
<div class="col-3">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas</p>
</div>
Ustawienie grafiki obok tekstu
W projekcie mamy też 2 obrazki. Pierwszy z nich jest wyśrodkowany, drugi zaś przesunięty do prawej. By wyśrodkować grafikę musimy zmienić ją obiekt blokowy (obrazy to obiekty liniowe).
Kod dla naszej strony:
.first-img{
margin: 0 auto; /* środkowanie obiektu blokowego */
display: block; /* zmieniamy w obiekt blokowy */
}
.second-img{
float:right;
}
ul.left{
float: left; /* zmiana na obiekt liniowy */
}
Powyższy kod zadziała dla kodu HTML, który wkleiłam już wcześniej.
Obrazek do prawej
Poza tekstem:
iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas

<div class="container-2">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas</p>
<img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:right;">
</div>
W akapicie na końcu
iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas
<div class="container-2">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas <img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:right;"></p>
</div>
Na początku
iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas
<div class="container-2">
<p><img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:right;">iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas </p>
</div>
Obrazek do lewej
Poza tekstem:
iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas

<div class="container-2">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas</p>
<img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:left;">
</div>
W akapicie na końcu
iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas
<div class="container-2">
<p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas <img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:left;"></p>
</div>
Na początku
iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas
<div class="container-2">
<p><img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" style="float:left;">iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas </p>
</div>
Złożony kod
Gotowy kod strony przedstawia się następująco:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Przykładowa strona</title>
<style>
*, ::after, ::before {
box-sizing: border-box;
}
body{
margin:0;
padding:0;
}
h1{
text-align:center;
}
section{
width: 900px;
margin: 0 auto;
padding: 0;
}
.col-1, .col-2, .col-3{
float: left;
padding: 15px;
}
.col-1, .col-3{
width: 20%;
}
.col-2{
width: 60%;
}
.col-3{
font-size:14px;
}
nav ul{
list-style: none;
padding: 0;
}
nav ul li a{
padding: 8px;
display: block;
background: #d98e89;
text-decoration: none;
color: #333;
text-align: center;
border-bottom:1px solid #fff;
}
nav ul li a:hover{
background: #dfa09c;
}
.first-img{
margin: 0 auto;
display: block;}
.second-img{
float:right;
}
ul.left{
float: left;
}
</style>
</head>
<body>
<section>
<div class="col-1">
<nav class="menu">
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Podstrona 1</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
<div class="col-2">
<h1>Sed ut perspiciatis, </h1>
<p>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur <b>aut odit aut fugit</b>, sed ut odit aut fugit, sed quia consequuntur magni <i>dolores eos, qui ratione voluptatem sequi nesciunt, neque porro</i> </p>
<img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" class="first-img">
<ul class="left">
<li>Nemo enim ipsam </li>
<li>voluptatem, </li>
<li>quia voluptas sit, </li>
<li>aspernatur a</li>
</ul>
<img src="https://www.aurainweb.pl/wp-content/uploads/2011/03/how-to-choose-your-seo-provider-e1359467963576-1.jpg" class="second-img">
</div>
<div class="col-3"> <p>iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quas</p></div>
</section>
</body>
</html>