Question

If I have couple <div>s within a <td>, can I select each one?

For example i want to make the first one float left and the second float right. is it possible using just CSS?

.divE:first-child { float:left; }
.divE:last-child  { float:right; }

HTML

<table id="myTbl" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        <div class="red">asdasd</div>
        <div class="divE"></div>
        <div class="divE"></div>
        content
        </td>
    </tr>
</table>

Answer 1

Yes it is 🙂

You can set the .divE class to float left by default, and then you can by using the adjacent sibling selector define, that when an div of the divE class immediately follows another div of the divE class, it should float right like this:

.divE {
    float:left;
}

.divE + .divE {
    float: right !important;
}

But isn’t it easier just to give the divs an id each, and then set the floats to each? Or just apply a .floatRight or .floatLeft class to the divs, and then change the floats of these classes? In this way you could reuse the classes.

If you changed your HTML to:

<table id="myTbl" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="3" width="25%">
    <div class="red">asdasd</div>
    <div class="divE floatLeft"></div>
    <div class="divE floatRight"></div>
    content
    </td>
</tr>

And add CSS like this:

.floatLeft {
float: left;
}

.floatRight {
float:right;
}