Ucząc się cssa natrafiłem na kolejny problem. Postaram się to wszystko w miarę dobrze opisać.

Mam główny kontener, który ma lewy i prawy margines ustawiony na 12% (chciałem mieć puste białe paski po lewej i prawej stronie).

W tym kontenerze zostawiłem wolne miejsce na nagłówek (jeszcze go nie ma) i wstawiłem do niego tło, które powinno się powielać.

Pod miejscem na nagłówek wstawiłem belkę (czerwono-biały "pasek").

Pod paskiem wstawiłem innego diva, któremu (na potrzeby testów) nadałem styl "stopka" i wypełniłem ciągiem liter (..)aaaaa(..)

I teraz mam kilka problemów, z którymi nie potrafię sobie poradzić.

1. Jeżeli ciąg liter 'aaaa' (w divie "stopka") przekroczy szerokość głównego kontenera to.. no właśnie wychodzi poza niego a ja nie mam zielonego pojęcia dlaczego. Przecież główny kontener nie powinien wypuścić wewnętrznego diva poza siebie.. ZOBACZ

2. Jeżeli diva (ze stylem stopka) wypełnię kilkoma wierszami 'aaaa' to pod IE i Operą pojawia się pionowy pasek przewijania (i o to mi chodzi) a pod FF nie.. Też nie mam pojęcia co robię nie tak. Sposób naprawy buga w IE zaczerpnąłem stąd

3. W Operze pod divem "styl" zostaje dużo pustego miejsca a nie powinno tak być.

OPERA

IE


HTML:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  3.  
  4.    <head> 
  5.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6.       <meta http-equiv="Content-language" content="pl" />
  7.  
  8.       <meta name="Pragma" content="no-cache" />
  9.       <meta name="Cache-Control" content="no-store, no-cache, must-revalidate" />	  
  10. <!-- dołączenie styli głównych -->	  
  11. 	  <link rel="stylesheet" href="../css/glowny.css" type="text/css" />
  12.    </head>
  13.  
  14.    <body>
  15.  
  16.       <div id="kontener">
  17.  
  18.          <div id="belka">
  19.          </div>
  20.  
  21. 		  <div id="stopka">
  22. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaaxxxxxxx</p>
  23. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  24. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  25. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  26. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  27. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  28. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  29. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  30. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  31. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  32. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  33. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  34. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  35. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  36. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  37. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  38. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  39. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  40. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  41. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  42. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  43. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  44. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  45. 		  <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  46.  
  47. 	     </div>
  48.  
  49. 	  </div>
  50.  
  51.    </body>
  52. </html>
[HTML] pobierz, plaintext


CSS:
Kod
body {
  margin: 0;
  padding: 0;
}

div#kontener {
              margin: 0px 12%;
              padding: 0;
              position: absolute;
              background-image: url(../layout/tlo.gif);
              background-repeat: repeat;
              width: 76%;
              height: 100%;
}

@media screen {

                div#kontener {
                              position: fixed;
                             }

                * html {
                        overflow-x: hidden;
                        overflow-y: auto;
                       }
                * html body {
                             overflow-y: auto;
                             height: 100%;
                            }
                * html div#kontener {
                                     position: absolute;
                                    }
               }


#belka {  
    margin: 0;
    padding: 0;
    top: 26%;
    position: absolute;
      background-image: url(../layout/belka.gif);  
      width: 100%;
      height: 131px;
}

#stopka    {
         position: absolute;
         margin: 0;
         padding: 0;
         top: 50%;
         width: 100%;
}

p {
    margin: 0;
    padding: 0;
    background: yellow;
    width: 100%;
}


Bardzo proszę o pomoc bo mi już ręce opadają :/


EDIT:

Pliki do pobrania i ewentualnego sprawdzenia na własnym kompie:

belka.gif
tlo.gif