[FIXED] How to I position two elements on opposite sides of a table cell

Issue

I have a table cell with text and an icon. I want both elements to link to the the same place. I want the text to align to the left side and the icon to align to the right side of a table cell. Code could look something like this:

<td><a href="#">Text<span>icon</span></a></td>

EDIT: I edited the code to represent some requirements that I did not originally include. Both the text and icon must be links.

In addition, I am grabbing the width of the <a> tag when the user clicks on it. If I cut the text and icon into two different a tags my measurement will be inaccurate.

Solution

How about something like this?

<table>
    <tr>
        <td>Foobar</td>
        <td>
            <div class="left">
                <a href="#">Text</a>
            </div>
            <div class="right">
                <a href="#">icon</a>
            </div>
        </td>
 <table>

td {
    width: 150px;
}

.left {
    float: left;
}

.right {
    float: right;
}

UPDATE: How about keeping the <a> tag outside the <div>s then? Not pretty, but works: jsFiddle

Answered By - chopper

Answer Checked By - Cary Denson (PHPFixing Admin)