problem - html / css - float

[przemooomax]

Witajcie!

Moja strona wygląda tak: http://img715.imageshack.us/img715/6123/screenshotmuj.png

Kod:

<div id="produkty">
        
          <h1>Klimatyzatory ścienne</h1>
          
          <div class="item"><a href="#"><img src="kat/1_perfect_1.PNG" alt="" title="" border="0" /><p>Perfect</p></a></div>
          <div class="item"><a href="#"><img src="kat/1_comfort_1.PNG" alt="" title="" border="0" /><p>Comfort</p></a></div>
          <div class="item"><a href="#"><img src="kat/1_modern_1.PNG" alt="" title="" border="0" /><p>Modern</p></a></div>
          <div class="item"><a href="#"><img src="kat/1_exclusive_1.PNG" alt="" title="" border="0" /><p>Exclusive</p></a></div>
          <div class="item"><a href="#"><img src="kat/1_black_1.PNG" alt="" title="" border="0" /><p>Black Prestige</p></a></div>
          <div class="item"><a href="#"><img src="kat/1_white.PNG" alt="" title="" border="0" /><p>White Prestige</p></a></div>
          <div class="item"><a href="#"><img src="kat/1_cosmo.PNG" alt="" title="" border="0" /><p>Cosmo</p></a></div>
          <div class="item"><a href="#"><img src="kat/1_premium.PNG" alt="" title="" border="0" /><p>Premium</p></a></div>
        
        </div>

Kod:

    #content #produkty { padding-left:20px; padding-right: 20px; padding-top: 10px; }
    
      #content #produkty .item { width:264px; margin:7px; padding:3px; padding-top: 13px; float: left; background:#FFF; text-align:center; border: 1px solid #CCC; font-size:14px }
      #content #produkty .item a { color:#666}

Jak zrobic zeby nie było tego odstępu?

[Pedro84]

Usunąłbym float i poszedł w display:inline-block;

[przemooomax]

OK, ale teraz inny problem, zamiast 3 kolumn sa 2 co z tym zrobic?

[Pedro84]

Odpowiednie paddingi, marginesy i szerokość elementu nadrzędnego.

[przemooomax]

czyli jak zmodyfikować ten obecny kod?