SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,616
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    There are probably many easy solutions to this, but one thing you could try is this:

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

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, it's the following that seems to have the right behavior:

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

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by tonearm View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,616
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by tonearm View Post
    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.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry for the long delay replying. How is browser compatibility with the "table + *" syntax?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,616
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    It's fine. Browsers that don't support it are dead and gone now.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    CA
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •