Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Automatyczna wysokość div'ów
Forum PHP.pl > Forum > Przedszkole
porywacz
Witam, mam stronę internetową z trzema kolumnami. Wygląda to mniej więcej tak:
  1. <div id="all">
  2. <div id="header"></div>
  3. <div id="center_left"></div>
  4. <div id="center_center"></div>
  5. <div id="center_right"></div>
  6. <div id="footer"></div>
  7. </div>


Mój problem tkwi w tym, że w środkowej kolumnie przypisałem height wartość auto a pozostałym dwóm divom min-height: 700px;. Czy da się zrobić tak, że gdy środkowa kolumna będzie miała szerokość większą niż 700px to żeby pozostałe divy dopasowały jakoś tą szerokość? Obecnie gdy środkowa kolumna jest dłuższa niż 700px to pozostałe nie docierają do stopki :/ Bardzo proszę o pomoc smile.gif
Pozdrawiam ;p
!*!
Użyj CSS i display:table dla nich, ewentualnie jak Ci to nie pasuje JS.
porywacz
z display:table cała strona się rozjeżdża haha.gif Jednej kolumny wgl nie ma biggrin.gif
!*!
Cytat(porywacz @ 17.06.2012, 12:00:01 ) *
z display:table cała strona się rozjeżdża haha.gif Jednej kolumny wgl nie ma biggrin.gif

Widocznie robisz to źle. Wstaw kod http://jsfiddle.net/ i podaj link.
porywacz
Strona jest już oskryptowana, więc trochę trudno "wyciągnąć" ze strony poszczególne fragmenty kodu biggrin.gif
Może napiszesz jak to powinno wyglądać? Dałem w css do wszystkich trzech kolumn display: table, nie wiem czy dobrze cię zrozumiałem >.<
!*!
display:table dajesz tylko na div all, resztę w zależności jaki wynik chcesz osiągnąć, będą to inne parametry.
porywacz
Nie rozumiem ;d Muszę do diva 'all' dodać display: table, a do tych divów w nim co?
!*!
A przeczytałeś chociaż cokolwiek na temat tej właściwości? http://jsfiddle.net/HgCq6/
porywacz
Owszem, przeczytałem. A piszę bo nadal mi nie działa tongue.gif
robię tak jak ty i mi się rozjeżdża stronka ;/

css:

  1. #center {
  2. display: table;
  3. width: 900px;
  4. margin: 0 auto 0 auto;
  5. }
  6.  
  7. #center_left {
  8. display: table-cell;
  9. margin: 0 auto;
  10. float: left;
  11. width: 150px;
  12. background-color: white;
  13. }
  14.  
  15. #center_center {
  16. display: table-cell;
  17. float: left;
  18. margin: 0 7px 0 7px;
  19. width: 536px;
  20. background-color: white;
  21. }
  22.  
  23. #center_right {
  24. display: table-cell;
  25. text-align: justify;
  26. color: #a60000;
  27. float: right;
  28. width: 200px;
  29. background-color: white;
  30. margin: 0;
  31. }

Robię coś źle?
!*!
Usuń float.
porywacz
Ok, dzięki. Już jakoś to wygląda, lecz nadal coś jest nie tak biggrin.gif
Lewy div i prawy do siebie przylegają mimo to, że w środkowym mam margin: 0 7px 0 7px; . Jak to naprawić?
Aha i między tymi divami a stopką jest dość spory odstęp ;/
!*!
Wklej to tu http://jsfiddle.net
porywacz
http://jsfiddle.net/kEZnf/
!*!
Chodzi Ci o treść? http://jsfiddle.net/kEZnf/1/
porywacz
niee ;D Patrz: www..php to ta moja strona ;D
chodzi mi o to, że między lewą kolumną a środkową powinna być taka przerwa jak między środkową a prawą ;D I jeszcze ten odstęp nad stopką ;oo
I nie śmiać mi się ze strony, jestem początkujący ^^
!*!
http://jsfiddle.net/kEZnf/2/
porywacz
porywacz.onuse.pl/czitypl
Teraz jest jeszcze gorzej haha.gif jeszcze jakieś pomysły?

Problem rozwiązany, wystarczyło dodać między te 3 kolumny jeszcze 2 divy o szerokości 7px (oczywiście puste haha.gif) biggrin.gif
Temat do zamknięcia ^^
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.