CODEWITHSUNDEEP
htmlcss
user1822824
user1822824

Reputation: 2488

Make HTML Text Field & Button Same Height with CSS - Not working

I am trying to make both my text field and button the same height (40px) with CSS.

Why are the text field and button different heights even though they are both set to 40px?

My code is as follows: http://jsfiddle.net/xkmmP/

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
#textQuizFillBlankUserAnswer {
    border: 2px solid #000;
    font-size: 16px;
    font-weight: bold;
    width: 50%;
    height: 40px;
    float: left;
}
#buttonQuizFillBlankSubmit {
    border: 2px solid #000;
    font-size: 20px;
    font-weight: bold;
    width: 20%;
    height: 40px;
    float: left;
    margin-left: 5px;
}
</style>
</head>

<body>
<input type="text" id="textQuizFillBlankUserAnswer">
<input type="button" id="buttonQuizFillBlankSubmit" value="&gt;">
</body>
</html>

Upvotes: 0

Views: 3005

Answers (2)

icanc
icanc

Reputation: 3577

add this to :

#textQuizFillBlankUserAnswer {
    border: 2px solid #000;
    font-size: 16px;
    font-weight: bold;
    width: 50%;
    height: 40px;
    float: left;
    box-sizing: border-box;  // This line
    vertical-align: middle;  // and this line
}

Source

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191749

text and button inputs use a different box model. The button uses border-box, so the border is actually considered part of the box model (i.e. height). You can get around this by changing one of the models. Perhaps add box-sizing: border-box to the text input (you will need -moz-box-sizing too).

http://jsfiddle.net/xkmmP/

Upvotes: 2

Related Questions