[FIXED] How to align on the right an inline-block element?

Issue

As you can see in the following Fiddle: http://jsfiddle.net/EvWc4/3/, I'm currently searching a way to align the second link (link-alt) to the right side of its parent (p).

Why not using float or position:absolute you'll say, well the main reason is that I like the fact that the links' display (inline-block) property allow them to be verticaly aligned in a naturally kind of way.

By using float or position:absolute; I'll be forced to calculate and put some extra margin-top or top value to vertically aligned the links.

Here is the code but better see the Fiddle http://jsfiddle.net/EvWc4/3/ :

    <p>
        <a href="#" class="link">link</a>
        <a href="#" class="link link-alt">link alt</a>
    </p>

    p {
       padding: 20px;
       background: #eee;
    }
    .link {
       display: inline-block;
       padding: 10px;
       background: #ddd;
    }
    .link-alt { padding: 20px; }

Solution

To do this with CSS3 you can use the flex box model

HTML:

<div class="content">
    <div class="box box1"><a>Link 1</a></div>
    <div class="box box2"></div>
    <div class="box box3"><a>Link 2</a></div>
</div>

CSS:

.content {
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
.box2 {
    box-flex: 1;
}

(needs vendor prefixes)

http://jsfiddle.net/EvWc4/18/

Answered By - Petah

Answer Checked By - Mildred Charles (PHPFixing Admin)