How can i put two items into a div, one on the far left, and one in the center?

Question

I have a div with the id trackcontainer

the div has another div, called middle vertical align, then this contains an add to queue button.

I would like the add to queue button (currently an ) to be on the far left of the box with 2px on the right

Then there is a track name and the artist, I would like these to be center aligned regardless of the add to queue button

I have tried a float, but the title and artist name are going too far to the left as they are trying to align with the add to queue button

Answer 1

So the solution is to make a table

Create one row (<tr>), split it into four sections (<td>), left, middle, right with 25%, 50% and 25% width

Then you may add the elements to the relevant/corresponding parts

<table style="width:100%;">
    <tr>
        <td style="width:25%;">
            <a id="addToQueue">Add To Queue</a>
        </td>
        <td style="width:50%;">
            <a id="songtitle">Example Song</a>
            <a> by </a>
            <a id="artistname">Example Artist</a>
        </td>
        <td style="width:25%;">
        </td>
    </tr>
</table>