CSS - Creating two DIVs inside a <th> tag.

Question

Website in reference: http://www.imvu-e.com/products/ht/clients/test/

Notice on the tables how I have a newline separating Total and Hours, but it totally makes it look weird when the sort icon is inserted.

Its currently like this:

     Total
Hours [v^]

I like to have it like this:

Total
Hours [v^]

Figured the best way would be putting the text in a div and the icon in a div and then have the icon div to be float right maybe?

It would be even more amazing if I could actually get the sorting icon to be vertically aligned as well, but that might be asking for too much :)

ps: I feel like I am a amateur programmer/coder, yet I can never wrap my head around CSS positioning; Maybe its just not worded very well with the floats and such or maybe the tutorials I try to understand just confuse me. Any links to some helpful tutorials would be great. That way I don't have to keep relying on stackoverflow for CSS. I want to learn this stuff, but floating and everything is just very abstract. Don't get me started on why vertical-align isn't similar to text-align, lol.

Edit:

I have it like this now:

|         Total |
|    [v^] Hours |

But I would like it like this:

|         Total |
|[v^]     Hours |

Where the icon [v^] would be vertically aligned.

Answer 1

It seems to work correctly if you style the th elements with text-align: left. This will work because all of the columns are narrow enough that it doesn't make any difference whether they're right or left aligned. Just add text-align: right to your unsortable class and the "Name" heading will jump back to where it is now.

EDIT

Since you changed your question:

Use vertical-align: middle on your th elements now. The problem with using the positioning strategy is that it doesn't account for different-height table headings and even looked like it overlapped some of your text.

Using vertical-align in this particular case will sometimes leave the arrows on the first line, but that's because the text pushed it out of the way. It will, however, prevent the image from sitting on top of your text, which looks even worse. Also, you'll see that it makes the text vertically aligned as well, but I think it looks better than having them offset from each other.