Input width vs Button width

HTML & CSS
1

Hi,

This is simple CSS problem I’m sure, but it has stumped me.

If I have a input (textbox) and button, both set to 60% width, the button comes out slightly narrower in width than the textbox (I’m using FF 3.6). Why is this? Can I compensate for it with padding / margins?

Thanks!
Chris.

2

The input button use the broken box model where padding and borders are included on the inside on the dimension (don’t ask me why). You would need to account for these if you want them to be the same size which will be quite awkward in a percentage width scenario. Try adding more padding to the button to compensate.

3

Thanks, Paul.

Adding padding or margins didnt affect the overall width of the button as (like you said) as I added more, everything just got pushed further inside the edges of the button.

So, I’ve set my -

Text Input - 60% Width
Button - 61% Width,

And they now line up nicely. Is this the correct / best way?

4

lol - what was I thinking:) (I meant reduce the padding in the text box and then it would only be the border width wider.)

Yes increase the width to match although it may be difficult to get it pixel perfect.

(For good browsers you could change the box model (box-sizing) of the input but I think that’s too wide an implication.)

5

Just for interests sake here is the box-sizing method for IE8, FF3.6 and latest chrome safari.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 type="text/css">
input {
    width:40%;
    padding:5px;
    display:block;
    border:1px solid #000;
    margin: 0 0 1px;
}
#test2 {
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    -ms-box-sizing: content-box;
    box-sizing:content-box;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <div>
        <input type="text" name="test" id="test" />
        <input type="submit" name="test2" id="test2" value="Submit" />
    </div>
</form>
</body>
</html>