Witam,

moj problem polega na stworzeniu takiej konstrukcji:

- 3 divy polozone obok siebie poziomo
- srodkowy div to obrazek o stalej szerokosci i wysokosci, ma byc wycentrowany
- lewy i prawy div maja sie rozciagac do szerokosci monitora i byc wypelnione powtarzajacym sie obrazkiem

Probuje na rozne sposoby, ale mi nie wychodzi.

Moj index:

[HTML] pobierz, plaintext 
  1. <body style="margin:0px; padding:0px;">
  2.  
  3. <div class="container">
  4. <div class="left">
  5. </div>
  6.  <div class="main">
  7. <img src="images/tlo.jpg" style="width:1004px; height: 669px;" alt="tlo" />
  8.  
  9. </div>
  10.  <div class="right">
  11.  </div>
  12.  </div>
  13. </body>
[HTML] pobierz, plaintext



I css: 

[HTML] pobierz, plaintext 
  1. .container{
  2.  
  3. margin-left: auto;
  4. margin-right: auto;
  5. width: 1300px;
  6. height: 100%;
  7.  
  8. }
  9.  
  10. .main{
  11.  
  12. width: 1004px; 
  13. height: 100%;
  14. float: left;
  15. }
  16.  
  17. .left{
  18.  
  19. width: 100px; 
  20. height: 669px;
  21. float: left;
  22. background-color: green;
  23. }
  24.  
  25. .right{
  26.  
  27. width: 100px; 
  28. height: 669px;
  29. float: left;
  30. background-color: red;
  31.  
  32. }
[HTML] pobierz, plaintext


Musialem podac stale szerokosci dla diva lewego i prawego oraz container, bo inaczej cuda wychodza, probowalem podawac atrybuty auto czy 100% ale nie osiagalem zamierzonego celu.
Jakas podpowiedz?

ps. Srodkowy div musi miec stala szerokosc i wysokosc ze wzgledu na to ze mam dolozyc jeszcze obrazki menu z wartoscia absolute, tak aby w roznych rozdzielczosciach sie menu nie rozjezdzalo, bo obrazek jest duzy.