Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Dwa, wycentrowane divy obok siebie
Forum PHP.pl > Forum > Przedszkole
mateŁusz
A więc mam już dwa divy wyśrodkowane, lecz są one jeden pod drugim. Powinny być obok siebie i między nimi odstęp, np. 10 px.

CSS:
  1. .fanpage {
  2. width: 250px;
  3. height: 350px;
  4. border: 1px solid #550023;
  5. background-color: #750042;
  6. position: relative;
  7. margin: 0 auto;
  8. }
  9.  
  10. .fanpage_naglowek {
  11. width: 250px;
  12. height: 30px;
  13. background-image: url(images/naglowekfp.png);
  14. background-repeat: no-repeat;
  15.  
  16. }
  17.  
  18.  
  19. .fanpage1 {
  20. width: 250px;
  21. height: 350px;
  22. border: 1px solid #550023;
  23. background-color: #750042;
  24. margin: 0 auto;
  25. position: relative;
  26.  
  27.  
  28.  
  29. }
  30.  
  31. .fanpage1_naglowek {
  32. width: 250px;
  33. height: 30px;
  34. background-image: url(images/naglowekfp1.png);
  35. background-repeat: no-repeat;
  36.  
  37. }
  38.  
  39.  
  40.  
  41. .stala {
  42.  
  43. margin-left: auto;
  44. margin-right: auto;
  45.  
  46.  
  47. }


HTML
  1. <div class="stala">
  2. <div class="fanpage"><div class="fanpage_naglowek"></div>
  3. </div>
  4. <div class="fanpage1"><div class="fanpage1_naglowek"></div>
  5. </div>
  6. </div>


Jak do przerobić, aby było dobrze? biggrin.gif

DIV 1 | DIV 2
d3ut3r
http://jsfiddle.net/X5bgK/embedded/result/

poczytaj o CSS skupiając się na float.
mateŁusz
Czytałem tam sporo na internecie o centrowaniu, aby były obok siebie itd. za pomocą 'float: left' - jak to użyję to owszem jest obok siebie, ale div 1 jest przy borderze (?nie wiem jak to nazwać) po lewej stronie, a div 2 jest po środku. Mają być oba wycentrowane ;d

@edit
Dzięki za link, zaraz przerobię tak jak mi trzeba smile.gif

@edit2
Twój pomysł się nie sprawdził, ponieważ przy zmienieniu rozmiarów przeglądarki to raz są obok siebie, a raz jeden pod drugim (ctrl + scroll)

  1. #wrapper{
  2. width:514px;
  3. margin:0 auto;
  4.  
  5. }
  6.  
  7. .clearfix{
  8. clear:both;
  9. }
  10.  
  11. .column{
  12.  
  13. width:250px;
  14. height:350px;
  15. border: 1px solid #550023;
  16. background-color: #750042;
  17. float:left;
  18.  
  19. }
  20.  
  21. #col1{
  22. margin-right:10px;
  23. }
  24.  
  25. .columndj {
  26. width: 250px;
  27. height: 30px;
  28. background-image: url(images/naglowekfp.png);
  29. background-repeat: no-repeat;
  30. }
  31.  
  32. .columnpresenters {
  33. width: 250px;
  34. height: 30px;
  35. background-image: url(images/naglowekfp1.png);
  36. background-repeat: no-repeat;
  37. }
!*!
http://jsfiddle.net/NtNtD/ - ustalasz szerokość
http://jsfiddle.net/NtNtD/1/ - lub nie
mateŁusz
Dziękuję.
/do zamknięcia smile.gif
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.