Kilka blokowych elementów HTML obok siebie
- Data publikacji
- Ostatnio edytowano
Właściwość float, właściwość clear, selektor :after oraz właściwość content. Te trzy wymienione właściwości CSS oraz jeden selektor są kluczem do utworzenia układu elementów HTML, który będzie prezentować kilka elementów blokowych, ułożonych jeden obok drugiego, w poziomie.
W poprzednich dwóch częściach kursu CSS mieliśmy okazję zapoznać się ze wszystkimi wyżej wymienionymi zagadnieniami. Czas wykorzystać je w tej części kursu CSS.
Bez wątpienia najczęstszym sposobem na utworzenie układu elementów HTML, z blokowymi elementami HTML, ułożonymi obok siebie, jest sposób z wykorzystaniem właściwości float
, jednak stwarza to pewne problemy, które zostaną omówione i rozwiązane w tej części kursu CSS.
Pierwszą najważniejszą rzeczą, jaką musimy zapamiętać, jest fakt, że elementy HTML, które chcemy, aby układały się obok siebie, musimy umieścić w jakiś innym blokowym elemencie HTML, np. w elemencie div
.
<body>
<div id="rodzic">
<div id="dziecko1">pierwszy - div</div>
<div id="dziecko2">drugi - div</div>
</div>
</body>
Do naszego układu elementów HTML dodamy przykładowe właściwości CSS, które pomogą nam oznaczyć granice rozmiarów danych elementów div
.
#rodzic {
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
#dziecko1 {
background-color:lightblue;
}
#dziecko2 {
background-color:lightgreen;
}
Rezultat:
Nasze elementy div
umieszczone w elemencie #rodzic
układają się jeden pod drugim, ponieważ są one elementami blokowymi, które domyślnie zajmują sto procent wartości szerokości swojego rodzica.
Jednym z pierwszych kroków jakie musimy uczynić, aby wspomniane elementy div
układały się obok siebie, jest ustalenie dla nich takiej wartości szerokości (width
), aby elementy div
mieściły się w szerokości swojego rodzica, który domyślnie posiada wartość szerokości równą 100%
.
W naszym przykładowym układzie elementów HTML, mamy dwa elementy div
umieszczone w elemencie #rodzic
, ustawiamy dla nich wartość szerokości, która w sumie nie przekroczy 100%
, czyli np. 40%
oraz 30%
(40% + 30% = 70%).
#rodzic {
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
#dziecko1 {
width:40%;
background-color:lightblue;
}
#dziecko2 {
width:30%;
background-color:lightgreen;
}
Rezultat:
Gdy dodamy właściwość float:left;
lub float:right;
do elementu HTML to staje się on elementem unoszącym się w lewą lub prawą stronę. Gdy dwa takie elementy wystąpią po sobie w kodzie HTML to ułożą się one obok siebie, ale tylko wtedy, gdy ich wspólna wartość szerokości nie przekroczy wartości szerokości ich wspólnego rodzica.
#dziecko1 {
float:left;
width:40%;
background-color:lightblue;
}
#dziecko2 {
float:left;
width:30%;
background-color:lightgreen;
}
Rezultat:
Wszystko jest ok, nasze elementy div
ułożyły się obok siebie, ponieważ została dodana do nich właściwość float
wraz z wartością left
oraz wartość szerokości obu elementów div
nie przekroczyła 100%
wartości szerokości ich wspólnego rodzica.
Przez to, że element #rodzic
zawiera w swojej zawartości tylko elementy blokowe HTML, które posiadają w sobie właściwość float
wraz z wartością left
, to tak jakby nie miał on swojej zawartości, względem której mógłby określić swoją wartość wysokości, ponieważ jego zawartością są tylko unoszące się elementy HTML, dlatego wysokość elementu #rodzic
w tym wypadku wynosi 0
(widzimy tylko jego obramowanie, czyli właściwość border
, przerywaną czerwoną linię).
Jak sprawić, aby element #rodzic
reagował na swoją unoszącą się zawartość?
Spójrzmy co się stanie, gdy do elementu #rodzic
dodamy kolejny element div
, lecz bez właściwości float
.
<body>
<div id="rodzic">
<div id="dziecko1">pierwszy - div</div>
<div id="dziecko2">drugi - div</div>
<div id="dziecko3">to jest kolejny element - div - który został dodany do naszego układu elementów HTML</div>
</div>
</body>
Rezultat:
Od tej pory element #rodzic
ma taką samą wartość wysokości jaką zawartość posiada jego element div
, który nie ma w sobie właściwości float
, czyli element #dziecko3
, lecz to nie koniec naszych problemów, ponieważ elementy unoszące się, unoszą się nad elementem #dziecko3
, przez co zawartość tego elementu może układać się po różnych stronach elementów unoszących się, a nie chcemy aby tak się działo.
Jak rozwiązać nasz nowo powstały problem?
W jednej z poprzednich części kursu CSS dowiedzieliśmy się, że właściwość clear
wraz z wartością both
sprawia, że nad danym elementem HTML, do którego zostanie dodana wspomniana właściwość, nie mogą występować elementy unoszące się, czyli te elementy HTML, które posiadają w sobie właściwość float
wraz z wartością left
lub right
, dlatego dodajemy właściwość clear:both;
do elementu #dziecko3
.
#dziecko3 {
clear:both;
background-color:gold;
}
Rezultat:
Uwaga Jeżeli chcemy odsunąć element z właściwością clear:both;
od elementu z właściwością float:left;
lub float:right;
to należy dodać margines zewnętrzny (margin
) do elementu z właściwością float
, a nie do elementu z właściwością clear
.
#dziecko1 {
float:left;
width:40%;
margin-bottom:30px;
background-color:lightblue;
}
#dziecko2 {
float:left;
width:30%;
margin-bottom:30px;
background-color:lightgreen;
}
Rezultat:
Poznaliśmy jeden ze sposobów na to, aby wysokość elementu #rodzic
z powrotem automatycznie dopasowywał się do zawartości, jaka zostanie w nim umieszczona, nawet jeżeli tą zawartością będą elementy unoszące się. Problem polega na tym, że nasz sposób wymagał dodania dodatkowego elementu HTML, do naszego układu elementów HTML, co nie zawsze może się sprawdzić, ponieważ często chcemy, aby jeden element blokowy zawierał w sobie tylko elementy HTML, które będą układały się obok siebie.
Jak rozwiązać wyżej wymieniony problem?
Czas skorzystać z właściwości content
oraz selektora :after
, ponieważ połączenie tych dwóch rzeczy umożliwia na dodanie dodatkowej zawartości do danego elementu HTML, która będzie traktowana przez przeglądarkę internetową jako dodatkowy element HTML.
O selektorze :after
oraz właściwości content
mogliśmy przeczytać w poprzedniej części kursu CSS.
Tworzymy regułę CSS, która doda dodatkową zawartość (content
) do końcowej zawartości (:after
) elementu #rodzic
. W regule tej należy umieścić właściwość clear:both;
która rozwiązuje problem, który poznaliśmy niedawno. Dodatkowo reguła ta powinna posiadać w sobie właściwość display
wraz z wartością block
, ponieważ właściwość clear:both;
może być użyta tylko w elementach blokowych.
#rodzic:after {
content:'';
display:block;
clear:both;
}
Rezultat:
Dzięki regule CSS, którą utworzyliśmy powyżej, do końcowej zawartości (:after
) elementu #rodzic
została dodana pusta zawartość (content:'';
), która posiada w sobie cechy display:block;
oraz clear:both
.
Kod całego dokumentu HTML został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#rodzic {
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
#rodzic:after {
content:'';
display:block;
clear:both;
}
#dziecko1 {
float:left;
width:40%;
background-color:lightblue;
}
#dziecko2 {
float:left;
width:30%;
background-color:lightgreen;
}
</style>
</head>
<body>
<div id="rodzic">
<div id="dziecko1">pierwszy - div</div>
<div id="dziecko2">drugi - div</div>
</div>
</body>
</html>
Jeżeli chcemy, aby elementy HTML, które układają się obok siebie, w naszym przykładowym układzie elementów HTML, zajmowały całą szerokość swojego wspólnego rodzica, to musimy określić dla nich taką wartość szerokości, aby ich wspólne wartości dawały w sumie 100%
, czyli np. 40%
oraz 60%
.
#dziecko1 {
float:left;
width:40%;
background-color:lightblue;
}
#dziecko2 {
float:left;
width:60%;
background-color:lightgreen;
}
Rezultat:
Uwaga Elementy HTML, przedstawione powyżej, które układają się obok siebie i razem zajmują 100%
szerokości swojego wspólnego rodzica, nie powinny zawierać w sobie, po lewej oraz prawej stronie, takich właściwości jak: margin
, padding
, border
, ponieważ te trzy wymienione właściwości CSS powiększają szerokość elementu HTML (jeżeli zostaną dodane po lewej lub prawej stronie elementu HTML). Oczywiście możemy określić wartości, tych właściwości CSS, w procentach i sprawić, aby wartości właściwości width
, margin
, padding
wszystkich elementów HTML dawały w sumie 100%
.
Przykład:
#dziecko1 {
float:left;
width:30%;
margin:3%;
padding:2%;
background-color:lightblue;
}
#dziecko2 {
float:left;
width:50%;
margin:3%;
padding:2%;
background-color:lightgreen;
}
Rezultat:
Od tej pory całkowita wartość szerokości elementu #dziecko1
jest równa 30% + 3% + 3% + 2% + 2% = 40%, natomiast całkowita wartość szerokości #dziecko2
jest równa 50% + 3% + 3% + 2% + 2% = 60%, dzięki czemu obie wartości dają w sumie 100%
(40% + 60% = 100%).
Niestety właściwość border
, czyli styl obramowania elementu HTML, określona w procentach może nie dać nam pożądanej wartości, a więc lepiej zostawić nasze elementy unoszące się bez takich właściwości jak: margin
, padding
, border
i dodać do nich dodatkowy element HTML, w którym będziemy mogli określać różne właściwości CSS bez żadnych przeszkód.
Przykład:
Kod całego dokumentu HTML został umieszczony poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
#rodzic {
background-color:black;
border:3px dashed red;
font-size:1.4em;
}
#rodzic:after {
content:'';
display:block;
clear:both;
}
#dziecko1 {
float:left;
width:40%;
background-color:lightblue;
}
#dziecko2 {
float:left;
width:60%;
background-color:lightgreen;
}
div > div > div {
margin:15px;
padding:15px;
border:10px solid blue;
background-color:gold;
}
</style>
</head>
<body>
<div id="rodzic">
<div id="dziecko1">
<div>element - div w unoszącym się elemencie - div</div>
</div>
<div id="dziecko2">
<div>element - div w unoszącym się elemencie - div</div>
</div>
</div>
</body>
</html>
Oczywiście nasz układ elementów HTML może składać się z większej ilości elementów, które będą układać się obok siebie, wystarczy tylko dobrać odpowiednie wartości właściwości width
tak, aby wszystkie wartości właściwości width
, wszystkich elementów HTML, które mają układać się obok siebie, wynosiły razem 100%
wartości szerokości ich wspólnego rodzica.
Przykład:
W następnej części kursu CSS poznamy wszystkie sposoby, które przydadzą się nam, gdy będziemy chcieli, aby wysokość elementu rodzica, który posiada w swojej zawartości tylko elementy unoszące się, reagowała na wspomnianą zawartość.