Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Div obok / przylegający do wyśrodkowanego diva
Forum PHP.pl > Forum > Po stronie przeglądarki
korro
Witam.

Kod strony:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <style type="text/css">
  5. #div1 {
  6. background-color:blue;
  7. width:100px;
  8. height:100px;
  9. }
  10. #div2 {
  11. background-color:red;
  12. width:600px;
  13. height:400px;
  14. margin-left:auto;
  15. margin-right:auto;
  16.  
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="div1"></div>
  22. <div id="div2"></div>
  23. </body>
  24. </html>

Działająca: http://krr.ayz.pl/forum/1.html

Chciałbym aby czerwony kwadrat był w jednej linii z niebieskim, ale najważniejsze, aby przylegał do niego z lewej strony.
O tak:
koderrr
float:left dla obu divow ?

float:left dla obu divow ?
korro
div2 musi zostać centralnie. div1 przylegać do niego.
seth-kk
raczej cos w stylu
  1. <div style="width: 700px; margin: 0 auto; overflow: hidden;">
  2. <div style="float: left; width: 100px;"></div>
  3. <div style="float: rigth; width: 600px"></div>
  4. </div>

//update zeby szerszy div byl na srodku margin: 0 auto zamien na cos w stylu left: 50%; margin: -400px;
ziqzaq
Witam.
Efekt można osiągnąć też przez position: absolute, nie trzeba dzięki temu dużo kombinować z kodem.
  1. <style type="text/css">
  2. #div1 {
  3. background-color:blue;
  4. width:100px;
  5. height:100px;
  6. position: absolute;
  7. top: 0;
  8. left: -105px;
  9. }
  10. #div2 {
  11. background-color:red;
  12. width:600px;
  13. height:1200px;
  14. margin: 25px auto;
  15. position: relative;
  16. }
  17. </style>

  1. <div id="div2">
  2. <div id="div1"></div>
  3. </div>

Tylko trzeba pamiętać o prawidłowym DOCTYPE bo IE8 się zbuntuje, np:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd">

Nie wiem tylko czy IE6 to łyknie (w sumie powinien).
koderrr
wstaw jeden div container nadaj mu margin:auto

wstaw swoje dwa divy wewnatrz i ustaw im float:left

marginy zostaw w spokoj przy tych divach-> wywal je


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <style type="text/css">
  5. #div1 {
  6. background-color:blue;
  7. width:100px;
  8. height:100px;
  9. float:left;
  10. }
  11. #div2 {
  12. background-color:red;
  13. width:600px;
  14. height:400px;
  15. float:left;
  16. }
  17. #div3 {
  18. margin:auto;
  19. width:700px;
  20. height:400px;
  21.  
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div id="div3">
  27. <div id="div1"></div>
  28. <div id="div2"></div>
  29. </div>
  30. </body>
  31. </html>
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
korro
@koderrr: chodziło mi o to, żeby centralnie umieszczony był duży div, mały miał być obok. Twoje rozwiązanie centruje całość.

@ziqzaq: dzięki, to właśnie to.
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.