Is it possible to align a table caption to one side and it's span to another?

Question

For example:

<caption>My Table <span>My Table Span</span> </caption>

I want to align the caption to the left and it's span to the right:

caption { text-align:left; }
caption span { text-align:right; }

That will not work. Is it possible to do what I'm trying to do?

Answer 1

You could try using floats:

<table>
    <caption>My Table <span>My Table Span</span> </caption>
    <tr>
        <td>
            Cell 1
        </td>
    </tr>
</table>

CSS:

caption span { float:right; }

Just keep in mind this could wreak havoc on your elements below these in the rendered page. You may need to apply clear:both to the next element in the html.

Here's a basic example: http://jsfiddle.net/3PVnb/2/

You'll notice though that for some reason IE and Firefox render the caption slightly differently so this probably needs to be tweaked. Both do float the span on the right, but IE7 has a line break.

Answer 2

Since you do not appear to have widths defined, you might just try a little padding on the span:

caption span {
margin-left: 5em;
}