CODEWITHSUNDEEP
htmlcss
John
John

Reputation:

CSS - Left and Right alignment on the same line

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

Upvotes: 13

Views: 27221

Answers (6)

blazkovicz
blazkovicz

Reputation: 792

You can use display: flex; on container with justify-content: space-between; and align-items: baseline;. There is good sass mixin for flex supporting old and new syntax: https://github.com/mastastealth/sass-flex-mixin

Upvotes: 0

Offirmo
Offirmo

Reputation: 19840

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 !

Upvotes: 15

Emily
Emily

Reputation: 10088

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.

Upvotes: 10

rahul
rahul

Reputation: 187050

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

.right { float: right }
.left { float: left }

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

Upvotes: 1

Rich Bradshaw
Rich Bradshaw

Reputation: 72965

Put each in a seperate div. Float one left, one right. Set the widths.

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

CSS

.mainlinks .left {
    float:left;
    width: 49%;
}

.mainlinks .right {
    float:right;
    width: 49%;
}

Upvotes: 3

dusoft
dusoft

Reputation: 11469

you need to put it to separate blocks (div) or override via more specific CSS applying to the link as proposed by @skurpur

i believe you must add display:block to the link to position it - e.g. only block elements can be positioned.

Upvotes: 0

Related Questions