Aby podzielić stronę na pół w HTML, najczęściej wykorzystuje się dwa bloki (np. <div>, <section>) i odpowiednio je stylizuje za pomocą CSS. Pozwala to podzielić dowolny fragment strony – poziomo lub pionowo – na dwie równe części. Oto szczegółowy poradnik krok po kroku, z przykładami zastosowań.
Struktura HTML – dwa bloki obok siebie
Najbardziej uniwersalne rozwiązanie to wstawienie dwóch bloków do kontenera:
<div class="container">
<div class="left-half">Lewa połowa</div>
<div class="right-half">Prawa połowa</div>
</div>
Możesz użyć również <section>, jeśli treść ma charakter tematyczny, albo <main>, <aside> itp., w zależności od semantyki strony.
Najpopularniejsze sposoby podziału strony na pół
Podział za pomocą css flexbox
Flexbox to obecnie najczęściej zalecana metoda, ponieważ jest czytelna, elastyczna i dobrze wspierana przez przeglądarki.
.container {
display: flex;
width: 100%;
min-height: 300px;
/* wysokość przykładowa */
}
.left-half, .right-half {
flex: 1 1 50%;
padding: 20px;
box-sizing: border-box;
}
.left-half {
background-color: #e0f7fa;
}
.right-half {
background-color: #ffe0b2;
}
Cechy rozwiązania –
- Bloki
left-halfiright-half– zajmują po 50% szerokości kontenera; - Dzięki
box-sizing: border-boxpadding – nie wypycha bloków poza ich szerokość; - Responsywność – można dopracować media queries.
Podział za pomocą właściwości float
Dawniej popularne, dziś zalecane do prostych lub starszych projektów.
.left-half, .right-half {
float: left;
width: 50%;
min-height: 300px;
}
.left-half {
background: #e0f7fa;
}
.right-half {
background: #ffe0b2;
}
Uwaga – po elementach float warto dodać clearfix, by uniknąć problemów z wysokością kontenera.
Podział za pomocą css grid
Grid daje większą kontrolę nad ułożeniem i stosuje się go do bardziej zaawansowanych układów.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
min-height: 300px;
}
.left-half, .right-half {
padding: 20px;
}
Przykłady zastosowań podziału strony na pół
Typowe zastosowania –
- Strony z podziałem na menu i treść główną,
- Podstrony typu porównanie produktów/cech (lewa vs. prawa),
- Portfolio – zdjęcie po jednej stronie, opis po drugiej,
- Panel logowania i rejestracji obok siebie,
- FAQ – pytania po lewej, odpowiedzi po prawej.
Pełen kod HTML + CSS (flexbox)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Podział strony na pół w HTML</title>
<style>
.container {
display: flex;
width: 100%;
min-height: 400px;
}
.left-half, .right-half {
flex: 1 1 50%;
padding: 24px;
box-sizing: border-box;
}
.left-half {
background-color: #cce7ff;
}
.right-half {
background-color: #fcebb3;
}
@media (max-width: 800px) {
.container {
flex-direction: column;
}
.left-half, .right-half {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left-half">
<h2>Lewa połowa</h2>
<p>To jest lewa sekcja podzielonej strony.</p>
</div>
<div class="right-half">
<h2>Prawa połowa</h2>
<p>To jest prawa sekcja podzielonej strony.</p>
</div>
</div>
</body>
</html>
Uwagi praktyczne –
- Zastosowany media query – sprawia, że na wąskich ekranach sekcje układają się jedna pod drugą;
- Kolory i padding – pozwalają wyraźnie rozdzielić sekcje wizualnie;
- Szerokość i wysokość – można dostosować do konkretnych potrzeb.
Rozszerzenia i modyfikacje
- Możesz dowolnie zmieniać proporcje szerokości (np. 30%/70%) – wystarczy zmienić wartości
flexlubwidth; - Podział możesz zastosować zarówno do całej strony, jak i drobniejszych fragmentów (np. tylko sekcji);
- Zamiast
divużywaj znaczników semantycznych (section,aside,main), jeśli podział ma znaczenie dla struktury treści; - Za pomocą dodatkowego CSS możesz dodać granice, cienie, obrazy tła – wszystko, co pozwala lepiej oddzielić sekcje wizualnie.
Podział strony na pół to jeden z fundamentów projektowania układów w HTML i CSS – pozwala zrealizować wiele typowych scenariuszy, a wybrane narzędzie (flexbox, grid, float) zależy od wymagań i złożoności projektu.
