Na poniższych obrazkach widać co jest nie tak. Pod IE niebieski nagłówek nie dochodzi do końca kontenera. Nie wiem co zrobić. Kiedyś ten problem rozwiązywałem tak, że: czerwony nagłówek pływał do lewej, niebieski nagłówek pływał do prawej a pomiędzy nimi wstawiałem jeszcze tło. Ale przecież chodzi o to, żeby kod był przejrzysty. Poniżej zamieszczam kod. Proszę doradźcie jak to ugryżć:

HTML:
[HTML] pobierz, plaintext 
  1. <body>
  2.       <div id="naglowek">
  3.           <div class="naglowek1">Nagłówek 1</div>
  4.           <div class="naglowek2">Nagłówek 2</div>
  5.       </div>
  6.       <div id="kontener">
  7. 		  <div class="lewypasek"></div><div class="prawypasek"></div>
  8. 		  <div class="lewakolumna"></div>
  9. 		  <div class="prawakolumna"></div>
  10.           <div id="stopka"></div>
  11. 	  </div>
  12.   </body>
[HTML] pobierz, plaintext


CSS:
[HTML] pobierz, plaintext 
  1. * {
  2.     margin: 0 auto;
  3.     padding: 0;
  4. }
  5. div#naglowek {
  6. 	               width: 778px;
  7. 		       overflow: auto;
  8. }
  9. .naglowek1 {
  10.                   width: 388px;
  11.                   height: 80px;
  12.                   color: black;           
  13.                   background-color: red;
  14.                   float: left;
  15. }
  16. .naglowek2 {
  17.                   width: 389px;
  18.                   height: 80px;
  19.                   color: black;           
  20.                   background-color: blue;
  21.                   float: left;
  22. }
  23. div#kontener {
  24.                      width: 775px !important;
  25.                      width: 777px;
  26.                      color: black;
  27. 	             background-color: green;
  28. 		     border: 1px black solid;
  29. 		     overflow: auto;
  30. }
  31. .lewypasek {
  32.                   width: 202px;
  33.                   height: 10px;
  34.                   background-color: pink;
  35.                   float: left;
  36. }
  37. .prawypasek {
  38.                     margin-left: 3px;
  39.                     width: 570px;
  40.                     height: 10px;
  41.                     background-color: pink;
  42.                     float: left;
  43. }
  44. .lewakolumna {
  45.                       width: 201px;
  46.                       height: 400px;
  47.                       color: black;
  48.                       background-color: yellow;
  49.                       border-right: 1px blue dotted;
  50.                       clear: both;
  51.                       float: left;
  52. }
  53. .prawakolumna {
  54.                         margin: 20px !important;
  55.                         margin: 20px 0 20px 20px;
  56.                         padding: 20px 10px;
  57. 			width: 511px !important;
  58.                         width: 515px;
  59.                         height: 250px;
  60.                         color: black;
  61. 		        background-color: yellow;
  62.                         border: 1px black solid;
  63.                         float: left;
  64. }
  65. #stopka {
  66.               width: 775px !important;
  67.               width: 777px;
  68.               height: 20px;
  69.               color: black;
  70.               background-color: blue;
  71.               clear: both;
  72. }
[HTML] pobierz, plaintext



I obrazki dla zaprezentowania:

--> FF

--> IE

Problem rozwiązany ale częściowo. Częściowo, ponieważ ktoś kiedyś twierdził na tym forum, że da się stworzyć stronę, która będzie wyglądała tak samo pod IE bez używania
Kod
!important
i powielania kodu.

Mi do tej pory coś takiego się nie udało. Czy jest możliwość poniższy kod cssa zamienić tak aby nie używać podwójnych definicji marginesów, szerokości czy wysokości, żeby uzyskać ten sam wygląd pod Mozillą i IE? Bo walidatory się o to żucają. Jestem ciekawy propozycji.

Kod za pomocą, którego udało mi się uzyskać pożądany efekt.
CSS:
[HTML] pobierz, plaintext 
  1. * {
  2.    margin: 0 auto;
  3.    padding: 0;
  4. }
  5. div#naglowek {
  6. 			  width: 777px;
  7. 			  overflow: auto;
  8. }
  9. .naglowek1 {
  10.             width: 390px;
  11.             height: 80px;
  12.             color: black;           
  13.             background-color: red;
  14.             float: left;
  15. }
  16. .naglowek2 {
  17.             width: 387px;
  18.             height: 80px;
  19.             color: black;           
  20.             background-color: blue;
  21.             float: left;
  22. }
  23. div#kontener {
  24.               width: 775px;
  25.               color: black;
  26. 	          background-color: green;
  27. 			  border: 1px black solid;
  28. 			  overflow: auto;
  29. }
  30. .lewypasek {
  31.             width: 202px;
  32.             height: 10px;
  33.             background-color: pink;
  34.             float: left;
  35. }
  36. .prawypasek {
  37.              margin-left: 3px;
  38.              width: 570px;
  39.              height: 10px;
  40.              background-color: pink;
  41.              float: left;
  42. }
  43. .lewakolumna {
  44.               width: 201px;
  45.               height: 400px;
  46.               color: black;
  47.               background-color: yellow;
  48.               border-right: 1px blue dotted;
  49.               clear: both;
  50.               float: left;
  51. }
  52. .prawakolumna {
  53.                margin: 20px !important;
  54.                margin: 20px 0 20px 20px;
  55.                padding: 20px 10px;
  56. 			   width: 511px !important;
  57. 			   width: 515px;
  58. 			   height: 250px;
  59.                color: black;
  60. 			   background-color: yellow;
  61.                border: 1px black solid;
  62.                float: left;
  63. }
  64. #stopka {
  65.          width: 775px;
  66.          height: 20px;
  67.          color: black;
  68.          background-color: blue;
  69.          clear: both;
  70. }
[HTML] pobierz, plaintext