I have a 1-row table with several columns that I'd like to align against the right side of the page. I've tried align="right" and float:right; but I get a strange result from the next set of tags after the table.

I do want to keep the table. Is there another way to right-align it that I could try?

ralphm
—
2013-01-11T22:40:32Z —
#2

There are probably many easy solutions to this, but one thing you could try is this:

table {float: right; margin-bottom: 1em;
table + * {clear: both;}

tonearm
—
2013-01-12T19:50:09Z —
#3

Thanks Ralph. I used clear:both like this and it works great:

<div style="height:0px; clear:both;"></div>

Can you tell me or point me to more info about what the "table + *" syntax indicates?

tonearm
—
2013-01-12T20:23:59Z —
#4

Actually, it's the following that seems to have the right behavior:

<div style="height:0px; clear:both;"> </div>

felgall
—
2013-01-12T21:18:27Z —
#5

tonearm said:

what the "table + *" syntax indicates?

table + * points to the next tag after the </table> and so applies the clear:both to that tag without needing to add an extra tag into the HTML.

ralphm
—
2013-01-12T21:39:25Z —
#6

tonearm said:

Can you tell me or point me to more info about what the "table + *" syntax indicates?

The + indicates the next element directly after the table, and the * is the universal selector, meaning "any element". So the rule says that whatever element follows the table, set it to "clear: both". It's a little neater than your solution, as you don't have to add unnecessary HTML to your page, as felgall said. Oftentimes (such as in a CMS) you don't have the luxury of being able to add HTML manually.

tonearm
—
2013-03-04T20:26:57Z —
#7

I'm sorry for the long delay replying. How is browser compatibility with the "table + *" syntax?