Input width vs Button width

**iffy** · Jan 25, 2011 04:48

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.

**Paul O'B** · Jan 25, 2011 04:51

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.

**iffy** · Jan 25, 2011 05:07

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?

**Paul O'B** · Jan 25, 2011 06:13

Originally Posted by iffy

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?

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.)

**Paul O'B** · Jan 25, 2011 06:34

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

Code:

<!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>

User Tag List

Thread: Input width vs Button width

Thread Tools

Display

Input width vs Button width

Bookmarks

Bookmarks

Posting Permissions