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ę

[Bazan]

Jeśli one są takie same to nie potrzebnie robisz im inne id.
Musisz pamiętać, że taki sam id może być tylko 1 w danym pliku html.
Czyli nie możesz zrobić

[HTML] pobierz, plaintext 
<div id="box"></div>
<div id="box"></div>
[HTML] pobierz, plaintext 

Jeśli nie masz pewności, czy jakiś div się nie powtórzy to stosuj klasy, czyli:

[HTML] pobierz, plaintext 
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
[HTML] pobierz, plaintext 

Jeśli chodzi o CSS to classy się deklaruje jako . a nie jako #, czyli w css wygląda to tak

[HTML] pobierz, plaintext 
 
 
#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;
}
[HTML] pobierz, plaintext 

Ten post edytował Bazan 25.08.2010, 21:04:50