CSS positioning of two horizontal elements - html

Question

How do I align foo to left and bar link to right?
<td>
<span>foo</span>
<span>bar</span>
</td>

Answer 1

You should use float to achieve that
Demo
td span:first-of-type {
float: left;
}
td span:last-of-type {
float: right;
}
Note that the pseudo I am using will target the first and the last span respectively, but if you are looking to support legacy versions of IE or other browsers, this will fail, using unique class for each span is recommended instead.
The only reason am using pseudo here is it saves me to declare classes, this is a huge advantage if you want to do this for each td
Also, I assume that you are not well informed for float or you must have tried to do so, if that's the case, you can refer my answer here for detailed information over float and also refer this, which isn't necessary for this scenario because you are using float in td except the floated elements, but if you have any elements or text apart from these two elements in the same td than make sure you clear the floating elements.

Answer 2

td > span:first-child {
float: left;
}
td > span:last-child {
float: right;
}
DEMO: http://jsfiddle.net/Px4un/

Answer 3

You can use inline styles, like this:
<td>
<span style="float: left;">foo</span>
<span style="float: right">bar</span>
</td>
Or plain CSS:
<style>
.left {
float: left;
}
.right {
float: right;
}
</style>
<td>
<span class="left">foo</span>
<span class="right">bar</span>
</td>
Please, don't use pseudo elements, like :first-child or :first-of-type, because it will be not cross-browser.