ansaurus

Question

CSS - Left and Right alignment on the same line

Answer 1

A:

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.

dusoft 2009-06-30 09:56:43

I tried that, and the left link was a line above the right link. I want them on the same line.

2009-06-30 09:58:35

well, you need to study CSS more to understand the box model. you need to float one element to the left and the other one to the right (or both to the left setting width to 50% - assuming no other padding/margin and borders are set).

dusoft 2009-06-30 10:00:11

Answer 2

+1 A:

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

Rich Bradshaw 2009-06-30 09:56:47

This assumes that there is no margin/border on the divs. The percentages would be better as px for the lengths of the divs.

Rich Bradshaw 2009-06-30 10:02:27

I have a "<div class="line"></div>" directly beneath my links, but with your set-up above, my links are now below the line. Moreover, the link I would like to be at the left side of the screen is now in the center. The right-links are in place as usual.

2009-06-30 10:15:50

You'll need to clear the floats. Stick a div with a style of clear:both underneat the mainlinks div.

Rich Bradshaw 2009-06-30 12:56:29

Answer 3

+2 A:

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

rahul 2009-06-30 10:00:40

I tried this setup, and it drastically altered the appearance of my page. Maybe I'll keep tinkering.

2009-06-30 10:14:01

Answer 4

A:

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.

Emily 2009-06-30 12:07:38

Thanks, Emily. Your simple solution worked perfectly. Also, thanks for helping me yesterday by suggesting Firebug for the other question I asked.

2009-06-30 23:09:37

ansaurus

tags:

views:

answers:

CSS - Left and Right alignment on the same line

related questions