Question

This little issue is starting to do my head in, I have read around a lot and have never had an issue with this in the past but I cannot seem to get the second div to appear on the right side of the table cell, any help would be appreciated.

My Markup is

<td>
    <div class="sort">
        <a href="#">ID</a>
        <span class="icon1"></span>
    </div>
    <div class="divider icon2"></div>
</td>

And my css is

thead .sort a {
    color: #fff;
    float: left;
}

thead .sort {
    float: left;
}  

thead .divider {
    float: right;
}  

I am expecting this is something simple or something I am just overlooking.

Thanks,

Answer 1

table .sort a {color: #f00; float: left;}
table .sort {float: left; border:1px solid #093;}  
table .divider {float: right; border:1px solid #00F;}

and

<table width="100%" border="0">
      <tr>
        <td>
          <div class="sort">
            <a href="#">ID</a>
            <span class="icon1"></span>
          </div>
          <div class="divider icon2">icon</div>
        </td>
      </tr>
    </table>

works.

Note I just added a couple of borders to the CSS.

But then I just tried your code and that works here too.

Using THEAD or TABLE in the CSS seems to make no difference. Is it possible you have another style clashing with those used for the table?

Anyway, with the above CSS (referencing table .SORT instead of THEAD .sort), adding THEAD tags around a row in the HTML doesn’t affect it.

Hope that helps.