Plik html
[HTML] pobierz, plaintext 
  1.  
  2. <body class="twoColFixLtHdr">
  3.  
  4. <div id="container">
  5.   <div id="header">
  6.     <h1>Nagłówek</h1>
  7.   <!-- end #header --></div>
  8.   <div id="sidebar1">
  9.     <h3>Zawartość paska bocznego Sidebar1</h3>
  10.     <p>Kolor tła skojarzony z tym elementem div będzie widoczny tylko w tle zawartości. Jeśli chcesz użyć linii oddzielającej, to umieść obramowanie po lewej stronie znacznika div #mainContent (o ile będzie on zawierał więcej elementów). </p>
  11.     <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
  12.   <!-- end #sidebar1 --></div>
  13.   <div id="mainContent">
  14.     <h1> Główna treść </h1>
  15.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
  16.     <h2>Nagłówek na poziomie H2 </h2>
  17.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
  18. 	<!-- end #mainContent --></div>
  19. 	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
  20. 	<br class="clearfloat" />
  21.   <div id="footer">
  22.     <p>Stopka</p>
  23.   <!-- end #footer --></div>
  24. <!-- end #container --></div>
  25. </body>
  26.  
[HTML] pobierz, plaintext


Plik css
[HTML] pobierz, plaintext 
  1. body  {
  2. 	font: 100% Verdana, Arial, Helvetica, sans-serif;
  3. 	background: #666666;
  4. 	margin: 0; 
  5. 	padding: 0;
  6. 	text-align: center;
  7. 	color: #000000;
  8. }
  9. .twoColFixLtHdr #container { 
  10. 	width: 780px;  
  11. 	background: #FFFFFF;
  12. 	margin: 0 auto; 
  13. 	border: 1px solid #000000;
  14. 	text-align: left; 
  15. } 
  16. .twoColFixLtHdr #header { 
  17. 	background: #DDDDDD; 
  18. 	padding: 0 10px 0 20px;  
  19. } 
  20. .twoColFixLtHdr #header h1 {
  21. 	margin: 0; 
  22. 	padding: 10px 0; 
  23. }
  24. .twoColFixLtHdr #sidebar1 {
  25. 	float: left; 
  26. 	width: 200px;  
  27. 	background: #EBEBEB; 
  28. 	padding: 15px 20px 15px 20px;
  29. }
  30. .twoColFixLtHdr #mainContent { 
  31. 	margin: 0 0 0 230px; 
  32. 	padding: 0 20px; 
  33. } 
  34. .twoColFixLtHdr #footer { 
  35. 	padding: 0 20px 0 20px; 
  36. 	background:#DDDDDD; 
  37. } 
  38. .twoColFixLtHdr #footer p {
  39. 	margin: 0; 
  40. 	padding: 10px 0; 
  41. }
  42.  
  43. .clearfloat { 
  44. 	clear:both;
  45.     height:0;
  46.     font-size: 1px;
  47.     line-height: 0px;
  48. }
[HTML] pobierz, plaintext


.twoColFixLtHdr #mainContent {
margin: 0 0 0 230px;
padding: 0 20px;
}

Przesunięcie #mainContent działa dopiero od 230px, a przy 220px i 210px nie działa - o co chodzi w tym?