Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Jak umieścić DIV'a po prawej, lewej i na środku?
Forum PHP.pl > Forum > Przedszkole
Heniut
29.11.2012, 16:45:41
Cześć.

Wykonałem taki "rysunek":

Tam gdzie jest logo div ma być po lewej, tam gdzie DIV po prawej, a tam gdzie dalsza część strony to na środku. Czy nie ma tu czegoś tak prostego jak align ?
Szukam i nie mogę nic znaleźć ..
b4rt3kk
29.11.2012, 17:20:48
Jest coś takiego jak float w css. Względnie możesz użyć position: absolute.

[HTML] pobierz, plaintext 
  1. <head>
  2. <style type="text/css">
  3. .left {
  4. float: left;
  5. width: 200px;
  6. height: 200px;
  7. background: red;
  8. }
  9.  
  10. .right {
  11. float: right;
  12. width: 200px;
  13. height: 200px;
  14. background: yellow;
  15. }
  16.  
  17. .content {
  18. background: silver;
  19. width: 100%;
  20. height: 500px;
  21. }
  22.  
  23. .clear {
  24. clear: both;
  25. }
  26. </style>
  27. </head>
  28.  
  29. <body>
  30. <div class="left"></div>
  31. <div class="right"></div>
  32. <div class="clear"></div>
  33. <div class="content">Zawartosc strony</div>
  34. </body>
[HTML] pobierz, plaintext
Heniut
29.11.2012, 17:36:03
Wielkie dzięki!
Pawel_W
29.11.2012, 17:44:33
po co ten .clear to ja nie wiem, można było dać .content clear: both, width: 100% jest zbędne
b4rt3kk
29.11.2012, 18:28:59
Cytat(Pawel_W @ 29.11.2012, 17:44:33 ) *
po co ten .clear to ja nie wiem, można było dać .content clear: both, width: 100% jest zbędne


A po co w ogóle nadawałem wymiary boxom? Żeby było widać jak to działa.
tomi1985
29.11.2012, 18:30:19
mozna to jeszcze prosciej zrobic smile.gif

[HTML] pobierz, plaintext 
  1. // css
  2.  
  3. #rama {
  4. text-align:center;
  5. width:600%;
  6. }
  7.  
  8. #nav {
  9. width:100%;
  10. margin:auto;
  11. }
  12.  
  13. #logo {
  14. float:left;
  15. width:149px;
  16. }
  17.  
  18. #cos {
  19. text-align:right;
  20. width:450px;
  21. }
  22.  
  23. #text {
  24. margin-top:20px;
  25. width:100%;
  26. }
  27.  
  28. <div id="rama">
  29.  
  30. <div id="nav">
  31.  
  32. <div id="logo">
  33. </div>
  34.  
  35. <div id="cos">
  36. </div>
  37.  
  38. <div id="text">
  39. </div>
  40.  
  41. </div>
  42.  
[HTML] pobierz, plaintext
Pawel_W
29.11.2012, 23:33:41
Cytat(b4rt3kk @ 29.11.2012, 18:28:59 ) *
A po co w ogóle nadawałem wymiary boxom? Żeby było widać jak to działa.

jakbyś nie dał tego width: 100% to efekt byłby taki sam...
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.