Jak ułożyć dwa DIV’y obok siebie?

Jeżeli dopiero rozpoczynasz naukę języka CSS oraz/lub HTML to z pewnością przyjdzie moment, w którym będziesz budować schemat strony internetowej. Schemat, szablon czy układ strony, możesz nazywać jak chcesz, zazwyczaj buduje się z wykorzystaniem znaczników <DIV>, które służą właśnie do tego celu.

Za pomocą znaczników div możemy tworzyć elementy blokowe, które działają jak pudełka. Każde pudełko jest umieszczone w określonym miejscu, ma swoją nazwę i przechowuje konkretne elementy w sobie. Za pomocą pudełek możemy segregować i układać elementy tak, aby można było je łatwo znaleźć. W przypadku strony internetowej mówimy tutaj oczywiście o czytelności.

Jeżeli znasz podstawy języka HTML i w pustym pliku umieścisz kilka div’ów, jeden pod drugim…


 <body>
   <div>
     <p>Treść pierwszego bloku</p>
   </div>
   <div>
     <p>Treść drugiego bloku</p>
   </div>
   <div>
     <p>Treść trzeciego bloku</p>
   </div>
   <div>
     <p>Treść czwartego bloku</p>
   </div>
 </body>

…to na ekranie w przeglądarce zobaczysz dokładnie taką samą strukturę jak w kodzie – każdy kolejny blok będzie znajdował się pod blokiem poprzednim. Jak w takim razie możemy uzyskać efekt „dzielenia” ekranu na kolumny? Tak aby np. dwa bloki znajdowały się obok siebie a trzeci blok znajdował się poniżej tych dwóch? Odpowiedź jest bardzo prosta, użyjemy do tego CSS’a!

Dla naszego ćwiczenia załóżmy, że chcemy stworzyć układ strony internetowej, który składa się z nagłówka, treści właściwej po lewej stronie, treści właściwej po prawej stronie oraz stopki a całość niech będzie zamknięta w kontenerze głównym.

W pierwszym kroku stwórzmy nasz plik index.html, w którym umieścimy wszystkie elementy typu DIV oraz odpowiednio je ponazywamy (zgodnie z rysunkiem). Plik będzie wyglądał tak:

<div id="container" >
  <div id="header">
     <h1>Logo</h1>
  </div>
  <div id="left">
     <p>Ciekawa treść po lewej stronie</p>
  </div>
  <div id="right">
     <p>Jeszcze ciekawsza prawa strona</p>
  </div>
  <div id="footer">
     <p>Treść stopki</p>
  </div>
 </div>

Stworzyliśmy już strukturę pliku html. Teraz czas na CSS, dzięki któremu wystylizujemy nasze pudełka, tak aby były odpowiednio rozmieszczone oraz dodatkowo każdemu nadamy inne tło (aby efekt w przeglądarce był dobrze widoczny).

Stwórzmy plik CSS i wystylizujmy najpierw nasz blok główny „container”:

#container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color: #abbcd8;
}

Mamy gotowy nasz pojemnik główny, któremu nadaliśmy określoną szerokość, wyśrodkowaliśmy go w poziomie oraz nadaliśmy mu kolor tła.

Teraz czas na nasz nagłówek „header”:

#header {
  width: 100%;
  background-color: #6d97db;
}

Tutaj chyba kodu nie trzeba opisywać, dodaliśmy jedynie atrybut width, w którym deklarujemy, że nasz nagłówek ma mieć całą szerokość (czyli 1000px tak jak nasz container) oraz dodaliśmy kolor tła.

Jak ułożyć bloki obok siebie w CSS?

Teraz pora na danie główne, czyli nasze dwa bloki, które mają znajdować się obok siebie. Zasada układania bloków w ten sposób jest niezwykle prosta. Jeżeli chcemy aby bloki sąsiadowały ze sobą, należy użyć zapisu „float: left” a pierwszy blok, który ma już być osobnym wierszem powinien mieć znacznik „clear: both”. Proste, prawda? 🙂

Zobaczmy jak będzie w praktyce wyglądał kod naszych bloków, „left” oraz „right”:

#left {
  float: left;
  width: 450px;
  background-color: #efefef;
}
#right {
  float: left;
  width: 450px;
  background-color: #a3a3a3;
}

W powyższym kodzie użyliśmy zapisu float: left w obydwu blokach, ponieważ chcę aby znajdowały się one obok siebie. Obydwa bloki mają nadaną szerokość oraz każdy ma inny kolor tła, aby można było zobaczyć różnicę w przeglądarce.

Jak już się zapewne domyślasz, kolejny blok, czyli nasza stopka powinna zawierać zapis „clear: both” ponieważ chcemy aby znajdowała się w osobnym wierszu (nie chcemy aby sąsiadowała z innymi blokami). Napiszmy więc kod CSS:

#footer {
  clear: both;
  width: 100%;
  background-color: black;
}

To jest w zasadzie cała tajemnica, zaledwie kilka linii kodu powoduje, że bloki zmieniają swoje zachowanie i ustawiają się tak jak byśmy tego pożądali. Nie pozostaje Ci nic innego jak przetestować wynik powyższego ćwiczenia w przeglądarce. Powodzenia!

Zobacz także

Czy warto płacić za szablon pod WordPress? Recenzja motywu do 200zł

Darmowy szablon od Theme Forest i aplikacja od Code Canyon – lipiec 2017

Darmowy szablon premium od themeforest

Darmowy szablon Premium HTML5 – do końca maja 2017!

Brackets czyli ciekawy edytor pod CSS i HTML