Jak ustawiać elementy obok siebie (float, display)?

Jak ustawiać elementy obok siebie (float, display)?

Na początku wszystkie elementy HTML układają się jeden pod drugim (blokowo). Ale bardzo często chcesz, aby elementy znajdowały się obok siebie – w jednej linii, np. zdjęcie z opisem, dwa boksy z ofertą lub trzy kolumny.

W tej lekcji poznasz dwa sposoby:

• float – klasyczna technika do pozycjonowania
• display – nowoczesny i elastyczny sposób (inline-block, flex, grid – ale tutaj skupimy się na podstawach)

1. float – klasyczny sposób układania elementów

float pozwala „przypłynąć” elementowi w lewo lub prawo – inne treści ustawiają się obok niego.

.box {
  width: 45%;
  float: left;
  margin-right: 5%;
  background-color: #e1f5fe;
  padding: 10px;
}

<div class="box">Lewa kolumna</div>
<div class="box">Prawa kolumna</div>

Efekt:

⚠️ Po elementach z float warto dodać clear: both;, aby uniknąć problemów z kolejnymi elementami.

.clearfix {
  clear: both;
}

<div class="clearfix"></div>

2. display: inline-block – prosty sposób na ustawianie w linii

Domyślnie div to element blokowy – ustawia się pod spodem. Ale jeśli zmienisz jego display na inline-block, może stać się elementem w linii (obok innych), ale nadal zachowa cechy bloku (np. padding).

.box-inline {
  display: inline-block;
  width: 45%;
  background-color: #ffecb3;
  padding: 10px;
  margin: 5px;
}

<div class="box-inline">Pierwszy blok</div>
<div class="box-inline">Drugi blok</div>

Efekt:

Uwaga: czasem między blokami pojawia się niewielka przerwa – to spacja w kodzie HTML. Można ją zredukować za pomocą marginesów ujemnych lub innego formatowania, ale na początku nie musisz się tym przejmować.

3. Który sposób wybrać?

W nowoczesnym CSS często używa się już flex lub grid – ale poznasz je później w kursie. Na razie te dwie metody w zupełności wystarczą do prostych układów.

🎯 Ćwiczenie w JSFiddle

Przetestuj obie metody samodzielnie w JSFiddle.

HTML:

<div class="float-left">Lewa kolumna (float)</div>
<div class="float-right">Prawa kolumna (float)</div>
<div class="clearfix"></div>

<br>

<div class="inline-blok">Pierwszy blok (inline-block)</div>
<div class="inline-blok">Drugi blok (inline-block)</div>

CSS:

.float-left {
  float: left;
  width: 45%;
  background-color: #b2dfdb;
  padding: 10px;
  margin-right: 5%;
}

.float-right {
  float: left;
  width: 45%;
  background-color: #ffccbc;
  padding: 10px;
}

.clearfix {
  clear: both;
}

.inline-blok {
  display: inline-block;
  width: 45%;
  background-color: #f0f4c3;
  padding: 10px;
  margin: 5px;
}

👨‍💻 Kliknij Run i obserwuj, jak zmienia się układ elementów w zależności od metody!

✅ Podsumowanie

• float – element „przepływa” w lewo lub prawo, inne dostosowują się do niego
• display: inline-block – ustawia blokowe elementy w jednej linii
• Obie techniki pozwalają tworzyć kolumny i układy

To ostatni temat tej lekcji – teraz czas na quiz podsumowujący pozycjonowanie elementów!