Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Div nie dostosowywuje swojej wysokosci do zawartosci
Forum PHP.pl > Forum > Przedszkole
DerekDX
Witam,
jak w temacie:
mam diva który zawiera w sobie 2 obiekty: menu i ramkę w której jest wyświetlana zawartość strony mimo ze te w obiekty sa zawarte w tym divie to on żyje swoim życiem oto kod:
  1. /*------------------------------------CONTENT---------------------------------------------*/
  2. #content {
  3. margin-left:auto;
  4. margin-right:auto;
  5. width:1000px;
  6. height:auto;
  7. margin-top:5px;
  8. position:relative;
  9. }
  10.  
  11. div.content_gora_lewo {
  12. color:#FFF;
  13. background: url('images/naroznik_gora_lewo1.png') no-repeat top left;
  14. }
  15.  
  16. div.content_gora_prawo {
  17. background: url('images/naroznik_gora_prawo1.png') no-repeat top right;
  18. }
  19.  
  20. div.content_gora_prawo h1 {
  21. background: url('images/border_gora1.png') repeat-x top;
  22. margin: 0 12px 0 12px;
  23. height: 56px;
  24. line-height: 14px;
  25. font:Arial, Helvetica, sans-serif;
  26. font-size:16px;
  27.  
  28. }
  29.  
  30. div.content_gora_prawo h1 span {
  31. position:relative; top:500px;
  32. }
  33. div.content_gora_prawo h1 span p {
  34. padding-top:3px;
  35. padding-right:10px;
  36. float:right;
  37. }
  38.  
  39. div.content_gora_prawo h1 span p a {
  40. color:#CCC;
  41. }
  42. div.content_lewo {
  43. background: url('images/border_lewo1.png') repeat-y left;
  44. }
  45.  
  46. div.content_prawo {
  47. background: url('images/border_prawo1.png') repeat-y right;
  48. }
  49.  
  50. div.content_srodek {
  51. padding-top:100px;
  52. background:#fff;
  53. margin:0 14px 0 14px;
  54. }
  55.  
  56. div.content_srodek {
  57. color:#000;
  58. padding:20px 20px 20px 20px;
  59. }
  60. div.content_dol_lewo {
  61. background:url('images/naroznik_dol_lewo1.png') no-repeat bottom left;
  62. }
  63.  
  64. div.content_dol_prawo {
  65. background:url('images/naroznik_dol_prawo1.png') no-repeat bottom right;
  66. }
  67.  
  68. div.content_dol {
  69. background:url('images/border_dol1.png') repeat-x bottom;
  70. height:9px;
  71. margin:0 12px 0 12px;
  72. }
  73.  
  74.  
  75. div.zawartosc {
  76. width:730px;
  77. position:relative;
  78. padding-left:10px;
  79. padding-right:10px;
  80. height:auto;
  81. float:right;
  82. display:block;
  83. border-style:solid;
  84. border-width:thin;
  85. }
  86.  
  87. /*------------------------------------MENU-----------------------------------------------*/
  88. ul, ul li {
  89. display: block;
  90. list-style: none;
  91. margin: 0;
  92. padding: 0;
  93. float:left;
  94. }
  95.  
  96. ul {
  97. width: 150px;
  98. padding: 2px 2px 1px 2px;
  99. background-color: #9ce;
  100. border: 3px double #28e;
  101. }
  102.  
  103. ul li {
  104. border-bottom: 1px solid #9ce;
  105. }
  106.  
  107. ul a:link, ul a:visited {
  108. display: block;
  109. width: 127px;
  110. text-decoration: none;
  111. padding: 7px;
  112. font-weight: bold;
  113. background-color: #27c;
  114. color: #def;
  115. border-left: 10px solid #25b;
  116. }
  117.  
  118. ul a:hover {
  119. width: 117px;
  120. background-color: #28e;
  121. color: #fff;
  122. border-left: 20px solid #26d;
  123. }


To co jest w bloku content jest to div nadrzędny a blok MENU i div zawartość są w nim zawarte.
A oto HTML:
  1. <div id="header"></div>
  2.  
  3. <div id="content">
  4. <div class="content_gora_lewo">
  5. <div class="content_gora_prawo">
  6. <h1><span><p>Jesteś zalogowany jako </a></p></span></h1>
  7.  
  8. </div>
  9. <div class="content_lewo">
  10. <div class="content_prawo">
  11. <div class="content_srodek">
  12. <ul>
  13. <li></li>
  14. <li></li>
  15. <li></li>
  16. <li></li>
  17. <li></li>
  18. </ul>
  19.  
  20. <div class="zawartosc">
  21.  
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. <div class="content_dol_lewo">
  27. <div class="content_dol_prawo">
  28. <div class="content_dol">
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </body>
  35. </html>
rocktech.pl
Wszytko płynie ...
  1. .clear {
  2. clear:both;
  3. }


To działa na div.content zakładam ze to ten div żyje własnym życiem.
  1. <br class="clear" />
  2. </div>
  3. </body>
  4. </html>
DerekDX
pousuwałem selektory float z klasy "zawartosc" i "ul, ul li" i teraz nadrzedny div content ładnie się dostosowuje ale teraz oby dwa obiekty (class "zawartosc" i menu) są pod sobą a chce aby były obok siebie
rocktech.pl
Wszystko gra dodaj właściwości float na te 2 elementy. Jeżeli dalej coś się wyświetla nie po twojej myśli pokombinuj z <br class="clear" /> i będzie ok.
DerekDX
Cytat(rocktech.pl @ 23.11.2010, 23:25:30 ) *
dodaj właściwości float na te 2 elementy.


Właśnie je usunąłem chwyt z clear:both nie działą
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.