Witam.
Mam na swojej stronie "liste" z prostokątnych głównych divów. Z głównego diva jest możliwość żeby pod nim wysuneły sie 2 dodatkowe divy po kliknięciu przycisku ( JS).
I chodzi mi o to żeby ten div główny przesunął sie w dół gdy z powyższego diva głównego wysuną się dodatkowe. Troche namieszałem ;D.Czy ktos ma jakis pomysł?


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	 <link rel="stylesheet" href="stajl.css"/>
  4.  
  5. <script type="text/javascript">
  6. <!--
  7. function pokazAlboUkryj(co) { 
  8.      var obiekt = document.getElementById(co); 
  9.      if (obiekt.style.display == 'block') { 
  10.           obiekt.style.display = 'none'; 
  11.      } else { 
  12.           obiekt.style.display = 'block'; 
  13.      } 
  14. }
  15. -->
  16. </script>
  17.  
  18. </head>
  19. <body>
  20. <div class="main">
  21.  
  22.  
  23. 		<div id="main2">
  24. 			<a href="#add" onclick="pokazAlboUkryj('add'); return false;"><div id="more-option"><b>+2</b></div></a>
  25.  
  26. 				<div id="add">
  27.  
  28.  
  29. 				</div>	
  30.  
  31.  
  32. 		</div>
  33.  
  34. 		<div id="main2">
  35.  
  36.  
  37. 		</div>
  38. </div>
  39. </body>
  40. </html>
[HTML] pobierz, plaintext



I CSS

[HTML] pobierz, plaintext 
  1. .main
  2. {
  3.  
  4. border-radius:7px; 
  5. width:700px;
  6. height:100%;
  7. position:absolute;
  8. top:130px;
  9. left:385px;
  10.  
  11.  
  12. }
  13.  
  14. #main2
  15. { 	
  16. 	border-style: groove;
  17. 	border-width:1px;
  18. 	position:relative;
  19. 	top:50px;
  20. 	border-color: #1A2124;
  21. 	border-radius:4px;	
  22. 	width:700px;
  23. 	height:45px;
  24. 	background-color:#262626; 
  25. 	list-style-type:none;
  26. 	display: block;
  27. 	line-height: 50px;
  28. 	text-decoration: none;
  29. 	color:white;
  30.  
  31. }
  32.  
  33. #add
  34. { 	
  35. 	border-style: groove;
  36. 	border-width:1px;
  37. 	position:relative;
  38. 	top:45px;
  39. 	border-color: #1A2124;
  40. 	border-radius:4px;	
  41. 	width:700px;
  42. 	height:45px;
  43. 	background-color:red; 
  44. 	list-style-type:none;
  45. 	display: none;
  46. 	line-height: 50px;
  47. 	text-decoration: none;
  48. 	color:white;
  49.  
  50. }
  51.  
  52. #more-option
  53. {
  54. 	line-height:32px;
  55. 	text-align: center;
  56. 	width:40px;
  57. 	height:30px;
  58. 	border-style: groove;
  59. 	border-width:1px;
  60. 	border-radius: 7px;
  61. 	position:absolute;
  62. 	top:6px;
  63. 	right:20px;
  64. 	background:white;
  65. 	color:black;
  66. 	text-decoration: none;
  67. 	display:block;
  68.  
  69. }
[HTML] pobierz, plaintext