Width of text field with Strict Doctype

**next2heaven** · Jan 22, 2010 22:27

When you set the Doctype to Strict and do the following:

<div style="width:200px; background-color: #f0f">
<label for="fname">First Name</label>
<div style="background-color:#cccccc;"><input type="text" name="name" id="name" value="1" style="width:100%;" /></div>
</div>

it will end up making the input field longer than the <div> block. Why? Where does this extra padding come into play? I've set the padding on the input field to 0 and it still goes beyond. Can anyone explain what's going on with that? Thanks.

**RyanReese** · Jan 22, 2010 22:33

Hi, we would need to see a site for a better diagnosis. What browser is this happening in?

**next2heaven** · Jan 22, 2010 22:43

This is the whole page:

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>Welcome</title>

</head>
<body>
<div style="width:200px; background-color: #f0f">
	<label for="fname">First Name</label>
	<div style="background-color:#cccccc;"><input type="text" name="name" id="name" value="1" style="width:100%;" /></div>
</div>
</body>
</html>

Overflows in Firefox and Safari on the mac.

**RyanReese** · Jan 22, 2010 23:03

Hi, the borders are causing the overflow

. Borders add to the total width.

**Rayzur** · Jan 22, 2010 23:03

it will end up making the input field longer than the <div> block. Why? Where does this extra padding come into play? I've set the padding on the input field to 0 and it still goes beyond. Can anyone explain what's going on with that? Thanks.

I would guess that the borders on the input are playing a role in this. I'm not a form expert by no means, still learning myself. I can get what you are after by setting the 200px width on the input and giving it an inline-block display;

Then remove the width from the parent div and let it shrink wrap with inline-block also. Tested in FF3, Opera & Safari.

HTML 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>demo</title>
<style type="text/css">
#wrap {
    display:inline-block;
    background:#F0F
}
#wrap div{
    background:#CCC;
}
#wrap div input{
    display:inline-block;
    width:200px;
}
</style>
</head>
<body>
<div id="wrap">
    <label for="fname">First Name</label>
    <div><input type="text" name="name" id="name" value="1" /></div>
</div>
</body>
</html>

**Rayzur** · Jan 22, 2010 23:14

You can loose that inner div also by just using a <br> tag.

HTML 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>demo</title>
<style type="text/css">
#wrap {
    display:inline-block;/*shrink wrap*/
    background:#F0F;
}
#wrap input{
    display:inline-block;/*set a width*/
    width:200px;
    margin:0;/*safari*/
}
</style>
</head>
<body>
<div id="wrap">
    <label for="fname">First Name</label>
    <br />
    <input type="text" name="name" id="name" value="1" />
</div>
</body>
</html>

**Paul O'B** · Jan 23, 2010 06:58

Hi,

Ray that example will still be 204px (2 x 2px) wide due to the 2px (outset!) borders applied by default.

Although it works well otherwise

You could do it (semi) automatically using the technique I posted the other day for textareas.

e.g.

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>Welcome</title>
<style type="text/css">
.wrap {
    width:192px;
    padding:0 4px;
    background-color: #f0f;
    overflow:hidden;
}
.wrap input {
    padding:2px;
    width:100&#37;;
    margin:0 -1px 0 -4px;
    float:left;
    clear:both
}
</style>
</head>
<body>
<form action="">
    <div class="wrap">
        <label for="fname">First Name</label>
        <input type="text" name="name" id="name" value="1"  />
    </div>
</form>
</body>
</html>

The example works by adding padding to the parent equal to the border width (and any extra padding you want on the input) and then setting the input to 100% wide. This makes it too big but then its dragged back into the padding of the parent using negative margins and then fits exactly.

**Rayzur** · Jan 23, 2010 12:26

Originally Posted by Paul O'B

Hi,

Ray that example will still be 204px (2 x 2px) wide due to the 2px (outset!) borders applied by default.

Although it works well otherwise

You could do it (semi) automatically using the technique I posted the other day for textareas.

Hi Paul

Yes I had seen that method you used for textareas. It looks like it's just a basic neg-margin drag into parent padding with more favor to the left margin.

I expected that it all should have been wrapped in a form element too, just now cutting my teeth with forms. I avoided them for a long time but now I am regretting that since I have some coming up on a project.

I just ran into an issue with IE6/7 and a floated form, I will post a thread and see what your thoughts are on that.

**next2heaven** · Jan 23, 2010 13:55

Agreed. Forms are such a pain. I'm working on a Wufoo type project where developers can create the form visually and then have it write all the code complete with css theme for the CodeIgniter framework. It's nice because you can tell it to save to a database, pull the record from a database to prepopulate the form and/or email the form.

It just take so long to put those pieces together and have it be consistant without errors throughout your application/site.

**next2heaven** · Jan 23, 2010 13:58

I thought it'd be nice to only have to change the main div wrapper's width for the form so that the form fields can stretch to the end of the div wrapper or be half it's size, etc. I'm thinking this isn't the best way. I guess pixels it is.

I appreciate all the comments about this topic.

**Paul O'B** · Jan 24, 2010 05:58

I thought it'd be nice to only have to change the main div wrapper's width for the form so that the form fields can stretch to the end of the div wrapper or be half it's size, etc.

My method above allows that automatically.

**RyanReese** · Jan 24, 2010 10:47

Originally Posted by next2heaven

I thought it'd be nice to only have to change the main div wrapper's width for the form so that the form fields can stretch to the end of the div wrapper or be half it's size, etc. I'm thinking this isn't the best way. I guess pixels it is.

I appreciate all the comments about this topic.

As Paul said, as long as you don't change the input at all then Pauls way will work. He does 100%width/border and then drags it over witrh a negative margin equating the total borders (and padding if he set, I forget).

It's very effective