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ę

[pixeldave]

everth- dziękuję. I mam jeszcze jeden problem a właściwie pytanie. Każdy z tych 3 boxów składa się z 3 elementów graficznych jak w przykładzie poniżej:

http://fotozrzut.pl/zdjecia/69c6f07c58.gif

Teraz zastanawiam się jak najlepiej to zakodować w CSS. Nie wiem jak będzie poprawnie. Czy zrobić to w ten sposób?

CSS

CODE

#box2gora {
background-image: url(czesc1.gif);
background-repeat:no-repeat;
width: 235px;
height: 57px;
padding: 0px;
margin: auto;

#box2 {
background-image: url(czesc2.gif);
background-repeat: repeat-y;
width: XXpx;
padding: 0px;
height: 100%;
margin: auto;
}

#box2dol {
background-image: url(czesc3.gif);
background-repeat:no-repeat;
width: XXpx;
height: XXpx;
padding: 0px;
margin: auto;

}
}

I następnie żeby złożyć to w jednego boxa w kodzie zrobić tak?:

CODE

<div id="box2">
<div id="box2gora"></div>
TRESC
<div id="box2dol"></div>
</div>