CSS Float adding to the height of button - html

Question

OK something strange is going on here, i am using a class for 2 buttons that share styles. But when i apply a float right to one of the buttons it makes it bigger 26px vs 30px in my real world example.
It is only changing by 1px in this http://jsfiddle.net/Mag2D/ but it is still different.
I have a screen grab of inspect elements that show the 26 vs 30 here http://imgur.com/3WJdvcQ
This is the CSS that is being used...
.orderButton {
position: relative;
-moz-borderradius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #004282;
color: #fff;
padding: 5px 35px;
}
.right{float:right;}
Any idea why this is happening?

Answer 1

The answer is that when you float an inline element, it then becomes an inline-block element, which changes the way padding/width/height/margin properties are painted.
Whenever you have an inline element (e.g. span, a, etc) that you want to add padding to, make sure you set it to display: inline-block. It will display much more consistently cross-browser and, most likely, will be more likely to display the way you intended it to.

Answer 2

You have 2 issues here: 1) anchors are not block level elements. 2) when you float non-block level elements, they get turned into an inline-block level element and thus their model is changed.
If you set both to be floated by adding a "left" class to the left button and adding the float, they come out perfect.
HTML :
<a class="orderButton left">Place Order</a>
<a class="orderButton right">Place Order</a>
CSS :
.orderButton {
position: relative;
-moz-borderradius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #004282;
color: #fff;
padding: 5px 35px;
}
.right{float:right;}
.left{float:left;}

Answer 3

Solution #1:
Add this in the CSS:
.left{float:left;}
And add left class to the a tag
<a class="orderButton left">Place Order</a>
Solution #2:
In .orderButton, add:
display:inline-block;
When you float an element, it automatically becomes a block box. This box can then be shifted to the left or right on the current line but it also changes its margin, padding etc.
Demo #1 - With float on both a tags
Demo #2 - With inline-block; on the button class instead