Układ kolumnowy na stronie z pomocą float

Czas czytania: 7 minut

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.

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:

float:right; – div 1
float:left; – div 2
float:none; – div 3

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.

elementy liniowe i blokowe

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
projekt prostej strony www

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.:

width: 30%;
width: 70%;
width: 30%;

W tym wypadku kolumny nie układają się obok siebie. Spróbujmy więc raz jeszcze:

width: 20%;
width: 60%;
width: 20%;

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 */

Dodajemy proste pionowe menu

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>

2 thoughts on “Układ kolumnowy na stronie z pomocą float

  1. Bardzo dużo przydatnych danych, testuje właśnie nakładanie klasy i jej dopasowanie do strony. Bardzo dużo rozjaśnił mi ten artykuł jak to wszystko stosować. Dziękuję za niego. Choć jeszcze nie wszystko mi wychodzi.

    1. Może zamiast float lepszym rozwiązaniem był by Flexbox. Zasady działania są nieco inne jednak daje on też dużo większe możliwości. Chodzi np. o równą wysokość kolumn, wyśrodkowanie zawartości kolumn względem siebie.
      Z tego co wiem biblioteki CSS takie jak Bootstrap do ustawiania kolumn używają właśnie Flexbox. Przestawienie się na niego może być trudne, ale warto.

      https://flexbox.aurainweb.pl/podstawy-flexbox/

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go