Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML] 3 divy obok siebie i jeden na dole - auto height
arkos
post 7.02.2012, 16:07:47
Post #1





Grupa: Zarejestrowani
Postów: 93
Pomógł: 0
Dołączył: 24.12.2009

Ostrzeżenie: (20%)
X----


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

Ten post edytował arkos 7.02.2012, 12:23:28
Go to the top of the page
+Quote Post
strife
post 7.02.2012, 16:21:48
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

Ostrzeżenie: (0%)
-----


O to Ci chodzi?

* http://matthewjamestaylor.com/blog/equal-h...er-css-no-hacks
* http://matthewjamestaylor.com/blog/ultimat...tyle-pixels.htm

?


--------------------
Go to the top of the page
+Quote Post
arkos
post 7.02.2012, 16:29:24
Post #3





Grupa: Zarejestrowani
Postów: 93
Pomógł: 0
Dołączył: 24.12.2009

Ostrzeżenie: (20%)
X----


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.
Go to the top of the page
+Quote Post
strife
post 7.02.2012, 16:32:00
Post #4





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

Ostrzeżenie: (0%)
-----


Spróbuj dodać nad div'em #footer:

  1. <div style="clear: both"></div>


--------------------
Go to the top of the page
+Quote Post
arkos
post 7.02.2012, 16:32:10
Post #5





Grupa: Zarejestrowani
Postów: 93
Pomógł: 0
Dołączył: 24.12.2009

Ostrzeżenie: (20%)
X----


Próbowałem, nic.
Go to the top of the page
+Quote Post
strife
post 7.02.2012, 16:35:02
Post #6





Grupa: Przyjaciele php.pl
Postów: 2 605
Pomógł: 96
Dołączył: 22.10.2004
Skąd: UK

Ostrzeżenie: (0%)
-----


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>
Powód edycji: [strife]: Update


--------------------
Go to the top of the page
+Quote Post
arkos
post 7.02.2012, 16:36:02
Post #7





Grupa: Zarejestrowani
Postów: 93
Pomógł: 0
Dołączył: 24.12.2009

Ostrzeżenie: (20%)
X----


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!

Ten post edytował arkos 7.02.2012, 16:36:50
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 2.05.2025 - 07:30