CSS - Left and Right alignment on the same line

css, html

Solution

Float the left to the left

.left {float:left;}

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

But you need to remove the margin-top:300px from `a.links:link` otherwise the left will be 300px below the right.

Problem

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

Original source