3 x div, float i margin? Opcje

[pixeldave]

Witam serdecznie!

Przeszukałem całe forum i znalazłem podobny problem, ale rozwiązanie nie działa. Do rzeczy. Koduję szablon w którym obok siebie są 3 tabelki o identycznej szerokości 230px. Całość jest na środku.

Wrzuciłem 3 divy w jeden kontener. W kodzie wygląda to tak:

CODE

<div id="kontener">
<div id="box"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>

CSS:

CODE

#kontener {
position: relative;
top: 0px;
padding: 0px;
margin: auto;
border: double;
border-color: white;
width: 900px;
height: 360px;
}


#box {
float:left;
background-image: url(images/prace_03.png) no-repeat;
width: 235px;
padding: 0px;
height: 57px;

Koledzy! Bardzo proszę Was nie tylko o pomoc ale i wytłumaczenie dlaczego tak, a nie inaczej. Siedzę nad tym od 4 godzin i nie mam pojęcia w czym robię błąd.

Pozdrawiam i dziękuję

[maverick22]

obrazek dzielisz na 3 czesci i robisz tez 3 divy. srodkowa i dolna mozesz wlasciwie zrobic jako klase - zawsze kilka linijek kodu mniej.
srodkowy obrazek tniesz tak by mial wysokość 1 px.

[HTML] pobierz, plaintext 
<div id="box">
   <div id="boxgora">
   </div>
   <div id="boxtresc">
   TRESC
   </div>
    <div id="boxdol">
    </div>
</div>
[HTML] pobierz, plaintext 

a cssy:

[HTML] pobierz, plaintext 
#box { parametry }
 
#boxgora { width: xxpx;
                  height: xxpx;
                  background-image: url(sciezka);
                  background-repeat: no-repeat;
 
}
 
#boxtresc { width: xxpx;
                  height: auto lub min-height: xxpx;
                  background-image: url(sciezka);
                  background-repeat: repeat-y;
}
 
#boxdol { width: xxpx;
               height: xxpx;
               background-image: url(sciezka);
               background-repeat: no-repeat;
}
 
[HTML] pobierz, plaintext