Question

I would like to make a simple panel with buttons that are placed horizontally and aligned to the right. Willing to align it to the left I can easily do this like that :

.button {
    float:left;
    background-color: #55cc66;
    margin-right: 50px;
    padding: 5px;
}
//......
    <div id="switcher">
        <h3>Style Switcher</h3>
        <div class="button selected" id="switcher-default">
        Default
        </div>
        <div class="button" id="switcher-narrow">
        Narrow Column
        </div>
        <div class="button" id="switcher-large">
        Large Print
        </div>
    </div>

But when I do the same with float:right it obviously aligns it to the right but in inverted order. I have also tried text-align: right, position: absolute; right:150; and position: fixed; right:150;. The last two align to the right but awkwardly overlap the ‘buttons’.

How can I achieve this then ?

Answer 1

You can remove floats and align the container of your “buttons” to the right with the property text-align.
You don’t want your heading to be aligned to the right so you’ve to cancel it with text-align: left;.

One problem remains: you’re using non-semantic div when what you really want are buttons. You should use … button elements (or maybe input[type"button|image|submit"]).
These ones are focusable and are made for an action taking place when clicked (with mouse, keyboard or tap).
Back to these div: they are displayed as blocks by default, you’ve to change for inline-block – IE8+.

Fiddle: http://jsfiddle.net/PhilippeVay/YZaRW/