Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tworzenie podstawy strony - problem
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Micchaleq
Witam,

niestety nigdy rewelacyjnie nie rozumiałem kwestji divów oraz opcji float.
Nie mniej jednak coś tam kombinuje.

Moj problem polega na tym, ze moja stopka nachodzi na kolumnę main oto przykładowy kod:

  1. .top{
  2. width:800px;
  3. border:1px solid black;
  4. }
  5. .main{
  6. width: 800px;
  7. border:1px solid blue;
  8. }
  9.  
  10. .foot{
  11. width: 800px;
  12. border:1px solid orange;
  13. }
  14. .lewa{
  15. float: left;
  16. width: 300px;
  17. border:1px solid red;
  18. }
  19. .prawa{
  20. float: left;
  21. width: 300px;
  22. border:1px solid green;
  23.  
  24. }
  25. <div class="top">baner</div>
  26.  
  27. <div class="main">
  28. <div class="lewa">aa</div>
  29. <div class="prawa">bb</div>
  30. </div>
  31. <div class="foot">stopa</div>


Czy ktoś mógłby mi powiedzieć dlaczego się tak dzieje?

Sephirus
Daj jej (stopce) "clear:both" albo jeszcze lepiej przed zamknięciem diva klasy "main" jakiś elementem z tym stylem (clear:both)

Otóż smile.gif floaty są jak klej... jak coś ma floata to wszystko po nim się będzie starało do tego przyklejać tongue.gif Jak dasz clear:both (ew. left lub right) to kasujesz "przyklejanie" się elementów od tego dalej wink.gif

HTH! wink.gif

EDIT:

Najlepszym w ogóle nawykiem jest tzw. zamykanie "floatów" przykład:

  1. <!-- JAKIŚ KOD... -->
  2. <div class="kontener">
  3. <div class="blok_z_float">(...)</div>
  4. <div class="blok_z_float">(...)</div>
  5. <div style="clear:both"></div> <!-- To jest właśnie "zamykanie floatów" ;) -->
  6. </div>
  7. <!-- JAKIŚ KOD... -->


Po elementach z float, najlepiej jeszcze w ich kontenerze należy "zamknąć" floaty - dlaczego? właśnie dlatego by kod poniżej nie był przesuwany przez ten wyżej oraz po to by element kontenera miał poprawną wysokość w DOM. Często jest tak, że element, w którym znajdują się tylko elementy mające float ma niepoprawną wysokość.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.