Right-align a table?

HTML & CSS
1

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?

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

4

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

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

5

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.

6

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.

7

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

8

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

9

Thanks Ralph!