Centering span within div

[absolutmgd13]

I have what im calling 3 hot boxes: I cant seem to get the 3 span boxes centered within the #hotbox div. Any ideas?

CSS:

#hotbox{
width:820px;
margin-left:auto;
margin-right:auto;
}
.whychooseus{
padding-left:5px;
padding-right:5px;
width:260px;
}
.custquotes{
padding-left:5px;
padding-right:5px;
width:260px;
}
.supportbutton{
padding-left:5px;
padding-right:5px;
width:260px;
}


DIV & SPAN

<div id="hotbox">
<span class="whychooseus">Why Choose Us</span>
<span class="custquotes">Customer Quotes</span>
<span class="supportbutton">Support buttons</span>
</div>

[TJ111]

``260
+`260
+`260
+```5
+```5
+```5
+```5
+```5
+```5
______
``810

[felgall]

<span> are inline elements and so their position is determined by where they fall within the content. To be able to position them you need block elements such as <div>

[huckle]

Therefore you could try adding "display:block;" to the spans :p.

Surely they will be links anyway...?

[Centauri]

Setting spans to block display virtually turns them into divs, so may as well use divs. You cannot give inline elements a width, so you need to float block elements to get them side by side.

However, rather than setting up containers first and fitting content into them, look at the content first. This looks as though it may eventually be links with images to make it look good - therefore it is essentially a list of links as far as content goes. Probably better to mark it up in the html as an unordered list of links - set the <a>s to block display and size them, apply the images as backgrounds, and float both the <a>s and <li>s left to sit them in a line. No divs required then.

[absolutmgd13]

Nothings working for me! :( ... i set the margins of the 3 boxes as auto within the hotbox container and no movement, there listed under eachother

[WebJoel]

This might actually be a bona~fide situation where a TABLE is justified. The 'TR' would be the three chapter-headings you cited, and the 'data' would fall into line benieth. This layout (use of TABLEs) would assist user-agents for the visually handicapped as each vertical 'td cell's content would be beneith the proper 'header' (the TableHeader "<tr>")..

CSS:<style>
#table {border:1px solid silver; width:500px;}
#table th {border:1px solid blue;width:33%;}
#table tr {}
#table td {border:1px solid green; text-align:center;}
</style>HTML:<table id="table">
<tr><th title="Why Choose Us">Why Choose Us</th><th title="Customer Quotes">Customer Quotes</th><th title="Support buttons">Support buttons</th></tr>
<tr>
<td>choose well</td><td>we said this</td><td>some places to go</td>
</tr>

<tr>
<td>we're good, we're best!</td><td>overheard in town</td><td>call now</td>
</tr>

<tr>
<td>choose us then!</td><td>more good things said</td><td>some phone #s to call and ask about our services and have a representative call you</td>
</tr>

</table> This is after all, tabular data

[Centauri]

there listed under eachother
You want them side by side, yes?
#hotbox{
width:815px;
padding-left:5px;
margin-left:auto;
margin-right:auto;
}
#hotbox span {
padding:0 5px;
float:left;
width:260px;
}