Question

I have an area in which I want to add two buttons inside in. On the left side the button is “Sunday”, the right one is “misc”.
What I want is evenly to place two buttons.
Because two buttons have same size, so I assign them with the same class.
The code:

<div id="switcher"> 
 <div class="button" id="Sunday">Sunday</div>
 <div class="button" id="mic">mic</div>

So I thought Sunday is on the left side naturally. I just want to add some rules to seperate two buttons such as padding left…
However the result is “Sunday” is on the right side. Why?
Please see my CSS at jsfiddle.

Thanks.

Answer 1

The buttons have position set to absolute. Take this out of the .button class and ids (#Sunday and #mic).

Additionally, I would suggest getting rid of the buttons’ margins and paddings and using display:inline-block instead of inline. You can’t specify width or height in an inline element, and block elements normally can’t render on the same horizontal line without additional fiddling.

If you absolutely have to have the switcher width at 456px, then you can set the buttons at width 228px (1/2 of that). The line break in the html between the button divs adds a space between the buttons, so you should put the second div immediately after the first.

Here is a more manageable version of what you were trying to do. http://jsfiddle.net/ftQD5/19/

EDIT: If you want to align the buttons/text vertically, you can first set the buttons to position:relative and then set top:<vertical offset>px. This will shift the buttons down. Then, you can add padding-top on the buttons to make the text appear vertically centered. A newer example can be seen here: http://jsfiddle.net/ftQD5/20/

EDIT #2: An easier way to vertically center text in a surrounding div is to make the line-height equal to the div height. This will automatically center the text. It will also be easier to work with than the padding-top since it will not affect the height of the button divs. The last updated fiddle: http://jsfiddle.net/ftQD5/26/