Right floating link gets higher

Question

I am having trouble with a link that, when floating to the right, gets another height than links that do not float to the right. Here is the minimum code to produce it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {font: normal 12px/1.6 Arial; }
        .btn {background-color: Red; color:#000; padding: 5px 15px 5px 15px; }
    </style>
</head>
<body>
    <div>
        <a class="btn" href="#">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>
</body>
</html>

If I remove "Arial" from the body style it looks ok. But I of course need the font styling.

Answer 1

Padding only works on block elements and i guess the bad link acts like a block because of the float, add display:block to the .btn and float the nice link to the left

http://jsfiddle.net/4Qs5J/

Answer 2

Floating elements effectively changes them to block level elements (if they were not before) so the padding will not apply to the normal anchor, but it will to the floated one.

You can either add display: inline-block; to the unfloated anchor or float that one left. Inline block will keep it's inline properties as an anchor, but it will allow dimensions, padding and margins to be applied. inline block is used in IE after version 7.

Answer 3

First of you need to state height to get as high as eachother

float:left;

Remember the height is also set by padding

Anyhow it looks like you are making a menu, what about just doing

<ul>
<li style="float:left;"></li>
<li style="float:left;"></li>
</ul>

Then you have a container to your 2 objects

Answer 4

I did the same code in my own way hope it may help

//css

    <style>
        body { font-family:Arial, Helvetica, sans-serif; font-size:14px; }
        .container { height:40px;}
        .container a{ color:#FFF; padding:10px; padding:7px; }
        .btn {background-color: Red; color:#000;   }
    </style>

//HTML

    <div class="container">
        <a class="btn" href="#" style="float: left;">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>