How can I position my icons top right inside table cell?

Question

I'm trying to position some icons inside a table cell <td>, but the result is that they are position top right of the screen (outside of the table cell).

Short version of my code is like this:

<td class="td_name">
  <div class="actions">
    <div class="floatLeft iconset_16px update_sprite_bw_16px" title="Update"></div>
    <div class="floatLeft iconset_16px settings_sprite_bw_16px" title="Settings"></div>
    <div class="floatLeft iconset_16px delete_sprite_bw_16px" title="delete"></div>
  </div>
  <div class="gal_name">
    Some name
  </div>
</td>

Where td_name position is set to relative and action is set to absolute. This should work, but not this time.

What am I missing here? Se full code example on jsFidle.

NOTE

I'm trying to position the action DIV inside the <td class="td_name">.
If your jsFiddle stills shows the iconset_16px divs in the top right corner of the HTML window in jsFiddle, then your example is not working either.

#sim_gallery .defaultList tr td.name {  position: relative; width: 200px; height: 100px; }
#sim_gallery .defaultList tr td .actions { position: absolute; top: 0px; right: 0px; margin: 5px;}

NOTE 2
This is for everyone that is not familiar with the usage of tables.

In the early 90's it was very popular and very simple to use tables for page layout. But designers soon understood that changing layout was a pain in the a**. The use of tables also have several more disadvantages.

So yes, you can design anything without ever using tables.

So when do yo use tables? Tables are normally used for displaying tabular data. It's kind of Excel sheet for the web. My experience is that it's much easier to structure table data, than list elements and div's. So in some cases I use tables knowing that this will not have any negative effects on the website what so ever.

So please, do not start a debate about how bad is is to use tables. Use your energy to help me solve my problem :)

@Sparky672 because there is another div with the name. See my example code — Steven, Apr 15 '12 at 16:50
Sparky672 is saying: http://phrogz.net/css/WhyTablesAreBadForLayout.html — Phrogz, Apr 15 '12 at 16:57
@Sparky672 - I'm not wure what you are thinking, but you are very wrong. I'm trying to position an element inside a table cell. Se my comment / note in my original question. — Steven, Apr 15 '12 at 16:58
Wrong about what exactly? By saying that `table`'s are not a critical part of any layout? Please learn how CSS works. — Sparky, Apr 15 '12 at 17:00
@Phrogz - You are wrong to. I've been working with usability / design for the past 7 years. I know what I'm doing. Using tables for specific listings is not a problem. The problem comes when you try to design an entire page using tables. — Steven, Apr 15 '12 at 17:00
**Quote:** _"I know what I'm doing."_ Apparently you don't or you wouldn't need to ask this question. — Sparky, Apr 15 '12 at 17:04
@Sparky672 ok genious, if you are so clever in web design, why don't you see if you can solve my problem? — Steven, Apr 15 '12 at 17:19

Steven · Accepted Answer · 2012-04-15T18:27:09.897

After some more testing, it looks like it's not possible to position a table cell. Which kind of makes sense. But I wasn't trying to position the table cell itself, but the content inside the cell.

After some more research on the web (and some useless debate here), I found this article. This basically gives me the short answer: No, it's not possible.

In their example, they use jQuery. But since I still want to do this using CSS, I came up with an alternative solution.

I simply wrap my content inside a DIV in the table cell, and make sure this DIV is as large as the table cell. Voila, all is good :)

.wrapper { width: 200px; height: 100px; line-height: 100px; position: relative; border: solid 1px #666; }
.actions { position: absolute; top: 0px; right: 0px; }
.iconset_16px { height: 16px; width: 16px; background-color: #87ceeb; margin: 3px;}
.floatLeft  { float:left!important; }

<table>
<tr>
<td>
 <div class="wrapper">
 <div class="actions">
   <div title="Update" class="floatLeft iconset_16px"></div>
   <div title="Settings" class="floatLeft iconset_16px"></div>
   <div title="delete" class="floatLeft iconset_16px"></div>
 </div>

 <div class="gal_name">
   <a title=" Adventure" href="#"> Adventure</a>
 </div>
 <div>   
</td>
</tr>
</table>

score 0 · Answer 2 · answered Apr 15 '12 at 16:35

0

Don't know entirely what you're trying to do, but have you tried setting position: relative on your <td> and then adjusting the position of your icons as needed?

http://jsfiddle.net/Z3kpr/1/

answered Apr 15 '12 at 16:35

mg1075

17,985
8
59
100

I'm trying to position the `action` div inside the `td class="name"`. If you read my example css. `` **is** set to `relative`. The result of your changes is the same as mine. – Steven Apr 15 '12 at 16:52
@Steven - Hmm, I don't see position: relative set in the css for your , and the output of your fiddle looks different than the one I altered. – mg1075 Apr 15 '12 at 16:54
I've added the css in my original question. It's line 3 and 4 from the bottom in jsFiddle. – Steven Apr 15 '12 at 17:03
@Steven - I'm looking at your updated fiddle. Your css declaration is on a non-existent elment. You have td.name, when you would need to have used td.td_name, because the class on your table cell is .... I do not see any markup in your table where it is .... – mg1075 Apr 15 '12 at 18:50
Ah - that was just a typo from me. After a bit more searching on the net I did find the answer. See my reply. Thanks :) – Steven Apr 15 '12 at 20:51

score 0 · Answer 3 · answered Apr 15 '12 at 16:35

0

Your div elements under actions are floating left with your !important flag (bad idea for this very reason) so they are ignoring the positioning of their parent.

Remove the float and they will be positioned properly.

Here's your updated fiddle with one of them fixed so you can see the difference. http://jsfiddle.net/u9p4u/1/

answered Apr 15 '12 at 16:35

Terry

14,099
9
56
84

You are wrong. Floating div's inside the `action` div is no problem. Removing `floatLeft` does nothing. See your own example. I'm trying to position the `action` div **isnide** the ``. – Steven Apr 15 '12 at 16:53

How can I position my icons top right inside table cell?

3 Answers3