Arkusz E14 - dlaczego po użyciu float:left znika stopka?

Question

Cześć. Rozwiązuję sobie ten oto arkusz:

 

http://egzamin-e14.blogspot.com/2017/10/arkusz-e14-01-1706.html

 

Na początku zrobiłem szkielet strony w html czyli cztery bloki, baner, stopka i panele lewy i prawy. Zabrałem się za CSS i zrobiłem wszysto wg instrukcji. Jednak po zrobieniu każdy element był nad sobą, więc stwierdziłem że należy użyć float.

Po wpisaniu float:right; w stylach css panelu prawego jest coś takiego.

naturalnym kolejnym krokiem wydaje się być wpisanie float:left; w css panelu lewego, tak by oba te panele były obok siebie, a nad nimi baner, pod nimi stopka. Gdy jednak to robię, z niewiadomych przyczyn stopka całkowicie znika i jest niewidoczna.

 

 

Będę wdzięczny za wszelką pomoc w rozwiązaniu tego problemu.

Comments

Polecam przerzucić się na flexa: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Dużo przyjemniej ustawia się cały layout.

Answer 1

Okej, już działa

 

Jakby kogoś interesowało rozwiązanie - dopisałem atrybut clear:both; w css stopki.

Answer 2

Z mojej strony taka informacja:

Jeśli chcemy, aby divy układały się obok siebie, to musimy w pliku CSS dopisać właściwość float:left; .

Jeśli chcemy, aby divy układały się pod sobą, to musimy w pliku CSS dopisać właściwość clear:both; .

Comments

clear:both; . - czyści po floatach na konkretnym elemencie.

lub

.element::after {
  content: "";

} tak też robiłem na kontenerze rodziców.