CODEWITHSUNDEEP
htmlcsshtml-table
Roman Newaza
Roman Newaza

Reputation: 11700

CSS positioning of two horizontal elements

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

<td>
  <span>foo</span>
  <span><a href="">bar</a></span>
</td>

Upvotes: 1

Views: 53

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157384

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.

Upvotes: 2

Maksim Gladkov
Maksim Gladkov

Reputation: 3079

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.

Upvotes: 0

gvee
gvee

Reputation: 17171

td > span:first-child {
    float: left;
}
td > span:last-child {
    float: right;
}

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

Upvotes: 1

Related Questions