1

How do I align foo to left and bar link to right?

<td>
  <span>foo</span>
  <span><a href="">bar</a></span>
</td>
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Roman Newaza
  • 11,405
  • 11
  • 58
  • 89
  • Use CSS `float` attribute.. Either Inline Or in ur css file – Crazy Programmer Feb 13 '14 at 11:29
  • I see you are using `td` then you can use `td > span{ display: table-cell; }` and then give `text-align: left` to the first span and `text-align: right` to the second span. Not a better solution but it is one of many approaches. – Mr_Green Feb 13 '14 at 11:33

3 Answers3

2

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.

Community
  • 1
  • 1
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
1
td > span:first-child {
    float: left;
}
td > span:last-child {
    float: right;
}

DEMO: http://jsfiddle.net/Px4un/

gvee
  • 16,732
  • 35
  • 50
0

You can use inline styles, like this:

<td>
     <span style="float: left;">foo</span>
     <span style="float: right"><a href="">bar</a></span>
</td>

Or plain CSS:

<style>
.left {
     float: left;
}

.right {
     float: right;
} 
</style>

<td>
     <span class="left">foo</span>
     <span class="right"><a href="">bar</a></span>
</td>

Please, don't use pseudo elements, like :first-child or :first-of-type, because it will be not cross-browser.

Maksim Gladkov
  • 3,051
  • 1
  • 14
  • 16