Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Wyrównanie dwóch divów
Forum PHP.pl > Forum > Przedszkole
Turson
Jest tak...
http://iv.pl/images/06300473238258080703.jpg


Prawy div jest za króki.
clear:both nie pomaga

  1. <div class="page">
  2. <div id="menu">
  3. <div class="menu_left">
  4. <div class="logo"></div>
  5. </div>
  6. <div class="menu_right">
  7. <ul>
  8. <li><a href="#">link</a></li>
  9. <li><a href="#">link</a></li>
  10. </ul>
  11. </div>
  12. </div>
  13. <div class="main">
  14. <div class="left">
  15. <div class="l_cnt">
  16. lewo<br>lewo<br>lewo<br>lewo<br><br>lewo<br>lewo<br>
  17. </div>
  18. </div>
  19. <div class="right">
  20. <div class="r_cnt">
  21. <div class="szukajka">
  22. <form action="#" method="POST">
  23. <input type="text" name="szukaj" class="">
  24. <input type="submit" name="wyslano" class="">
  25. </form>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. <div class="clear"></div>
  31. </div>

  1. body{
  2. background:url(images/bg.jpg)repeat-x;color:black
  3. }
  4. .page{
  5. margin:0px auto;
  6. width:1000px;
  7. height:auto;
  8. margin-top:50px;
  9. border:1px solid #606060;
  10. }
  11. #menu{
  12. background:url(images/menu_bg.jpg) repeat-x;
  13. height:50px;
  14. width:auto;
  15. }
  16. .menu_left{
  17. float:left;
  18. width:120px;
  19. }
  20. .logo{
  21. background:url(images/logo.png) no-repeat;
  22. width:112px;
  23. height:42px;
  24. margin-left:10px;
  25. }
  26. .menu_right{
  27. float:right;
  28. width:880px;
  29. }
  30. #menu ul {
  31. margin: 0;
  32. padding: 0;
  33. list-style: none;
  34. }
  35.  
  36. #menu ul li {
  37. float: right;
  38. border-right: 1px dotted #515151;
  39. height: 50px;
  40. }
  41.  
  42. #menu ul li a {
  43. display: block;
  44. float: left;
  45. padding: 15px 25px 15px 25px;
  46. font-family:Letter Gothic Std;
  47. letter-spacing:0px;
  48. font-size:17px;
  49. text-decoration: none;
  50. color:#d1d1d1;
  51. text-shadow: 1px 1px 7px #222222;
  52.  
  53. }
  54.  
  55. #menu ul li a:hover {
  56. color: white;
  57. background:url(images/menu_bg_hover.jpg) repeat-x;
  58. width:#e9e9e9;
  59. }
  60. .main{
  61. width:100%;height:100%
  62. }
  63. .space{
  64. padding-top:50px
  65. }
  66. .left{
  67. float:left;
  68. width:700px;
  69. height:100%;
  70. background-color:#fbfbfb;
  71. overflow:hidden;
  72. }
  73. .right{
  74. float:right;
  75. width:300px;
  76. background-color:#eeeeee;
  77. overflow:hidden;
  78. height:100%;
  79. }
  80. .l_cnt{
  81. padding:50px 15px 50px 15px;
  82. }
  83. .r_cnt{
  84. padding:50px 15px 50px 15px;
  85. }
  86. .clear{clear:both}
lobopol
nie zrobisz tego tak, daj tło prawego elementu klasie main
Turson
No tak, działa.

Jest jednak ale. Gdy lewa strona jest za krótka to przyjmuje tło prawej
lobopol
to daj lewemu min heighta
kujol
U mnie wszystko niby w porządku jest, a nic nie zmieniałem.
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.