span boyutlandırma sorunu

Merhaba arkadaşlar,
tablı bir tasarım yapmaya çalışıyorum, tab butonlarım div tagı içinde span olarak duruyor.Ben cssde bu spanlara boyut veriyorum.Ancak o boyutta olmuyorlar yazının boyutu kadar şekil alıyorlar.Bunu nasıl düzeltebilirim.

Şu işe yaramayan css kodlarıyla örnek html yi de ekleseydiniz bir şeyler söyleyebilirdim.

Haklısınız valla

Bu kodları internetten buldum ve kendime göre düzenlemeye çalışıyorum

css kodları

#conteiner {width: 312px; height:470px; background-image: url('analizli_sonuclar.jpg');}

/* Sol */
#sol {border: 2px solid #ddd; background-color: #fff; padding-top:5px; padding-bottom:5px; width: 312px; display: inline-block}
#sol div {float:left; width:74px; height:29px; text-align:center;}
#sol span {cursor: pointer; background-image: url('sure_analiz_buton.jpg'); color:#fff;}
#sol span:hover {cursor: pointer; background-image: url('sure_analiz_buton_hover.jpg'); color:#fff;}

/* Sağ */
#sag {border: 2px solid #ddd; background-color: #fff; width: 312px}
#sag div{display:none;}


html kodları

<div id="conteiner">
<!-- Sol -->
<div id="sol">
<div><span>Buton 1</span></div>
<div><span>Buton 2</span></div>
<div><span>Buton 3</span></div>
<div><span>Buton 4</span></div>
</div>

<!-- Sag -->
<div id="sag">
<div>Buton 1 içeriğini girin</div>
<div>Buton 2 içeriğini girin</div>
<div>Buton 3 içeriğini girin</div>
<div>Buton 4 içeriğini girin</div>
</div>
</div>

#conteiner {width: 312px; height:470px; background-image: url('analizli_sonuclar.jpg');}

/* Sol */
#sol {border: 2px solid #ddd; background-color: #fff; padding-top:5px; padding-bottom:5px; width: 312px; display: inline-block}
#sol div {float:left;}
#sol span {text-align:center;display:block;width:40px;background-image: url('sure_analiz_buton.jpg'); color:#fff;}
#sol span:hover {cursor: pointer; background-image: url('sure_analiz_buton_hover.jpg'); color:#fff;}

/* Sağ */
#sag {border: 2px solid #ddd; background-color: #fff; width: 312px}
#sag div{display:none;}

html kodları

<div id="conteiner">
<!-- Sol -->
<div id="sol">
<div><span>Buton 1</span></div>
<div><span>Buton 2</span></div>
<div><span>Buton 3</span></div>
<div><span>Buton 4</span></div>
</div>

<!-- Sag -->
<div id="sag">
<div>Buton 1 içeriğini girin</div>
<div>Buton 2 içeriğini girin</div>
<div>Buton 3 içeriğini girin</div>
<div>Buton 4 içeriğini girin</div>
</div>
</div>

bu şekilde yap..

teşekkürler biomooj un verdiği kodları biraz düzenledim ve sorunum çözüldü.