Right-align a table?

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?

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;}

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?

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

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

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.

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.

I’m sorry for the long delay replying. How is browser compatibility with the “table + *” syntax?

It’s fine. Browsers that don’t support it are dead and gone now. :slight_smile:

Thanks Ralph!