Html – CSS – Left and Right alignment on the same line

csshtml

Below is some sample code, which has all the links right-justified. I would like to change the CSS so the "Left" link is left-justified, the others are right-justified, but they are all on the same line. How do I do that?

Thanks in advance,

John

The HTML:

<div class="mainlinks">
    <a href="left.php" class="links">Left</a>
    <a href="right1.php" class="links">Right1</a>
    <a href="right2.php" class="links">Right2</a>
</div>

The CSS:

.mainlinks
    {
    text-align:right;
    margin-top:3px;
    margin-right:10px;
    margin-bottom:0px;
    padding:0px;
    }

 a.links:link {
    color: #FF0000; text-decoration: none;
    text-align:center;
    margin-left:8px;
    margin-top:300px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    }

Best Answer

It's an old post, but it's well ranked on google so it's still relevant.

I used another way to align both right and left on the same line, without using any ugly float. It makes use of a table-like display :

HTML :


    <footer>
      <nav>links (to the left)</nav>
      <p>copyright (to the right)</p>
    </footer>

CSS :


    footer
    {
      display: table;
      width: 100%;
    }
    footer nav
    {
      display: table-cell;
      text-align: left;
    }
    footer p
    {
      display: table-cell;
      text-align: right;
    }

I find it much cleaner this way.

Hope this helps someone !