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;
}
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;
}
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;
}
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>
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;
}
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;
}
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;
}
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;
}
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;
}
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.
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.
źródło: "https://webkod.pl"