How do I Align three spans using CSS (no tables)

Question

So I have this table in some code;

<table>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
    <tr><td align="left">One</td><td align="center">Two</td><td align="right">Three</td>
</table>

I would like to not use tables and do the alignment and such all in CSS. I tried;

<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>
<span style="float:left;">One</span><span style="margin-left:auto;margin-right:auto;">Two</span><span style="float:right;">Three</span>

Example would be trying to convert this data to CSS to align as the table would;

<table>    
<tr><td align="left">Bob</td><td align="center">Dingle</td><td align="right">3923.33</td></tr>
<tr><td align="left">Johann</td><td align="center">Strauss</td><td align="right">33.33</td></tr>
<tr><td align="left">Skip</td><td align="center">Skipperson</td><td align="right">0</td></tr>
</table>

But the text in the middle doesn't align correctly as its jagged (different lengths) and so are the left and right values. Seems this is madness and I am leaning towards "Just Use Tables".

Any CSS experts? Please set me straight.

Answer 1

What do you mean jagged? You mean you want text-align:justify ? Or do you mean you're having trouble with the columns being different heights? If the latter, containing divs might help. For that matter, try using divs instead of spans or setting display:block

Anyway, looking at the CSS templates provided by Matthew James Taylor may help if you mean the latter problem.

Answer 2

First, get your HTML right: Use the correct tags to contain your data. The information you gave isn't really enough for us to ascertain what type of information you're trying to format. If it is tabular data, then there's no shame in using tables - its what its meant for.

Now the correct manner to using CSS is not to place all of your styles inline like what you are doing. Keep them in a separate CSS file instead, and use selectors to avoid having to repeat yourself so many times.

Here's the solution: http://www.jsfiddle.net/2TDXc/

Oh, and please don't listen to that 'Just Use Table' bullcrap. Really, its better for everyone in the long run.

Answer 3

You need to make use of the display:inline and display:inline-table css attributes. They're great for forcing any element to sit next to each other on the same line.

<div>
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
    <span style="display:inline-table;padding:2px;">One</span><span style="display:inline-table;padding:2px;">Two</span><span style="display:inline-table;padding:2px;">Three</span><br />
</div>

As for the jagged-ness, you must realize that your columns do not inherit or share anything from each other like they would in a table, so you'll ultimately have to hardcode a width. It looks like a table might be what you need.