Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]ustawienie 3 divów
Forum PHP.pl > Forum > Przedszkole
marek_90
Witam.

Mam taki problem: próbuję ustawić obok siebie 3 divy w następujący sposób:

1 z nich jest wyśrodkowany i równy szerokości strony
2 i 3 powinny być kolejno po lewej i prawej stronie i zawierać css którym jest np tło

U mnie wygląda to tak :

  1. <div class="main">
  2. <div class="lewy"></div>
  3. <div class="srodek"><img src="" /></div>
  4. <div class="prawy"></div>
  5. </div>


CSS wygląda tak :

  1.  
  2. .main {
  3. margin:0 auto;
  4. }
  5. body {
  6. margin-left: 0px;
  7. margin-top: 0px;
  8. margin-right: 0px;
  9. margin-bottom: 0px;
  10. }
  11. .srodek {
  12. width:918px;
  13. margin:0 auto;
  14. text-align:center;
  15.  
  16. }
  17. .lewy {
  18. float:left;
  19. background-image:url();
  20. background-repeat:no-repeat;
  21.  
  22.  
  23. }
  24. .prawy {
  25.  
  26. float:left;
  27. background-image:url();
  28. background-repeat:no-repeat;
  29.  
  30. }

i szczerze mówiąc nie mam pojęcia czego tam brakuje. Jakaś rada z waszej strony ? smile.gif
lobopol
daj lewemu i prawemu jakąś szerokość no i wysokość/treść
b4rt3kk
Wszystko w porządku, tylko nie widzisz tych divów fizycznie, bo są puste, nadaj im wymiary w css, albo wpisz treść. Aha, floaty powinny być tak:

lewy float: left
srodek float: left
prawy float: right
marek_90
Wygląda to tak :

div środkowy ma 918 px

a te po bokach kolejno lewy i prawy po 460 px i jak wstawie te szerokości to sie nakładają tak że lewy jest na górze heh wstydnis.gif
lobopol
http://jsfiddle.net/F2bhV/1/ (jak za mały boks to go powiększ)
marek_90
Muszę jeszcze spytać o wyśrodkowanie całości, sęk w tym, że te 2 boczne divy muszą zmieniać swoją szerokość automatycznie w zależnosci od rozdzielczości ekranu.
lobopol
To wszystkie do trzeciego diva z ustaloną szerokością i margin:auto, a co do ich szerokości na podstawie ekranu to niestety js, jeżeli mają być obok siebie
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.