Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] 3 divy obok siebie i jeden na dole - auto height
Forum PHP.pl > Forum > Przedszkole
arkos
Witajcie.

Mam problem z divami. Umieszczam 3 divy obok siebie w innym divie, ich wysokość musi być automatyczna, gdyż jest tam tekst, którego rozmiar będzie różnej wysokości.
A pod tymi głównym divem, w którym są te trzy będzie inny na całą szerokość. Problem polega na tym, iż divy z treścią nie rozsuwają się.

  1. <div id="bottom">
  2. <div id="bottom-left">
  3. <h3>Dlaczego my ?</h3><img src="images/home-why.png" alt="" />
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut turpis eu lorem cursus ornare quis ac erat. Donec tristique justo scelerisque dui auctor semper accumsan quam porta. Aenean pretium libero eu elit vestibulum sed condimentum lectus tristique.
  5. </div>
  6. <div id="bottom-center">
  7. <h3>O firmie</h3><img src="images/home-aboutus.png" alt="" />
  8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut turpis eu lorem cursus ornare quis ac erat. Donec tristique justo scelerisque dui auctor semper accumsan quam porta. Aenean pretium libero eu elit vestibulum sed condimentum lectus tristique.
  9. </div>
  10. <div id="bottom-right">
  11. <h3>Kontakt</h3>
  12. Jeżeli mają Państwo jakieś pytania dotyczące naszej oferty, prosimy o kontakt przy użyciu poniższych danych kontaktowych lub skorzystanie z formularza kontaktowego zamieszczonego na podstronie "Kontakt".
  13. </div>
  14. </div>
  15.  
  16. <div id="footer">stopka ...</div>


  1. #bottom{
  2. margin: 0 12px 0 12px;
  3. background: yellow;
  4. }
  5.  
  6. #bottom-left{
  7. float: left;
  8. width: 300px;
  9. margin-right: 17px;
  10. }
  11.  
  12. #bottom-center{
  13. float: left;
  14. width: 300px;
  15. margin-right: 17px;
  16. }
  17.  
  18. #bottom-right{
  19. float: left;
  20. width: 300px;
  21. }
  22.  
  23. #footer{
  24. width: 951px;
  25. height: 32px;
  26. padding: 8px 0 0 15px;
  27. background: red;
  28. font: 12px font1-1, sans-serif;
  29. color: #ffffff;
  30. }

To powinno dać efekt, że tło tych pól wszystkich jest żółte, a pasek stopki czerwonej jest na dole.

smile.gif
arkos
Nie, skopiuj sobie ten kod do notatnika, np. i zobacz jak to wygląda.
Stopka jest na samej górze, gdzie zaczynają się te trzy divy. Niezależnie ile tych divów jest, jeżeli ustawię, w którymś float to tak się dzieje, stopka idzie na samą górę, a nie jest pod divem.
strife
Spróbuj dodać nad div'em #footer:

  1. <div style="clear: both"></div>
arkos
Próbowałem, nic.
strife
No ale u mnie działa, albo nie rozumiem, hm.



Dodaj też tak gdzie się kończy div #bottom to samo.

  1. <div style="clear: both"></div>
arkos
LóL haha.gif
Przedtem robiłem i nie działało mi, nie wiem co mu się odmieniło hehe.

PS. To był tylko krótki wycinek (to co wstawiłem na forum) co podałem z szablonu strony i trochę przerobiony.

Dzięki!
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.