CODEWITHSUNDEEP
htmlcssalignment
Patryk
Patryk

Reputation: 24092

How to align horizontal buttons to the right?

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 ?

Upvotes: 3

Views: 23537

Answers (2)

FelipeAls
FelipeAls

Reputation: 22161

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/

Upvotes: 6

Eduardo Ponce de Leon
Eduardo Ponce de Leon

Reputation: 9696

Leave the class .button with float left, wrap all your buttons with another division (btn_wrapper) and add a specific width to it and float right. Just make sure that all your buttons fit inside the wrapper

.btn_wrapper{
width:300px;
float:right
} 

<div id="switcher">
        <h3>Style Switcher</h3>
<div class="btn_wrapper">        
<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>
    </div>

Upvotes: 0

Related Questions