CODEWITHSUNDEEP
csscss-floatheight
oligofren
oligofren

Reputation: 22993

Why does floating an input element change its height?

Basically I would like a span and a input element to take up the same amount of vertical space, so as to align the text in the two boxes properly. I can achieve this quite easily when not floating the elements. But as soon as I add a float property, some extra pixels are added to the input element's height. And I cannot for the life of me understand why that is.

And how do I fix it?

This problem exists on Safari on iOS 6 and Chrome on the desktop. Also happens in Firefox, but the effects are somewhat different.

I created this fiddle that shows my problem. 

<input class='float' value="some text" id='input2'/>
<span class='float' id='text2'>some text</span><br />

input, span {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 15px;
    line-height: 15px;
    padding: 0px;
    border: 0px;
}

input {
    text-align: right;
}

.float {
    float: right;
}

Upvotes: 6

Views: 2344

Answers (1)

dewyze
dewyze

Reputation: 979

Two things. It seems floating the input is giving it a 2px margin, which you can easily remove. If you do that and remove the line-height attribute, everything seems to line up on both counts.

http://jsfiddle.net/cYaa2/4/

input, span {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 15px;
    padding: 0px;
    border: 0px;
}

input {
    text-align: right;
}

.float {
    float: right;
}

input.float {
    margin:0px;
}

Upvotes: 2

Related Questions