Problem with <input type='text' /> and <textarea> width

Question

In the following code, both the INPUT and TEXTAREA elements render wider than they should. How can I limit them to 100% of the usable area within the div?

<!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" xml:lang="en" lang="en">
<head>
    <style>
       .mywidth{ width:100%; }
    </style>
</head>
<body>
    <div style="border: 3px solid green; width: 100px;">
        <input class="mywidth" ><br />
        <textarea class="mywidth"></textarea><br />
        <div style="background-color: yellow;" class="mywidth">test</div>
     </div>
</body>
</html>

Note: If I remove the DOCTYPE, it renders as expected, with the INPUT, TEXTAREA and inner DIV all the same width and not going outside the containing DIV.

Update: Not withstanding the default borders on those elements, it still appears to render incorrectly in IE7.

Community · Accepted Answer · 2017-05-23 12:19:33Z

13

I had this same problem. I used the box-sizing property mentioned here:

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Here's what it looked like for me:

<style>
   .mywidth{ 
     width:100%;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
    } 
</style>

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jul 22, 2010 at 13:24

bmaupin

16.3k6 gold badges100 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RussellUresti Over a year ago

This won't work in IE7 or less, as older browsers don't support box-sizing. Also, you should be sure to include -ms-box-sizing and always list the actual CSS3 property (box-sizing) last, so once browsers implement the real CSS property it will overwrite their vendor-specific version.

bmaupin Over a year ago

@RussellUresti: good call, I've updated my answer based on your comment

philnash · Accepted Answer · 2008-11-03 19:50:37Z

7

Inputs and textareas both have borders by default

<style>
   .mywidth{ 
     width:100%;
     border:0;
    } 
</style>

will render all the elements within your container.

Update

IE also has left and right padding on each element and the following css fits all the elements within the container in FF3, FF2, Safari 3, IE6 and IE7.

<style>
   .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>

However, don't forget that you will probably need a border, and perhaps the padding too, in order to make the fields appear to users as normal. If you set that border and padding yourself then you will know what the difference is, across browsers, between the width of the container and the width you will need to give to the input/textarea elements.

edited Nov 3, 2008 at 19:50

answered Nov 3, 2008 at 18:19

philnash

73.5k10 gold badges67 silver badges95 bronze badges

2 Comments

Larsenal Over a year ago

Have you tried it? Check IE7. It still bites into the green border on the containing div.

philnash Over a year ago

Apologies, I'm on a Mac! I'll see what I can do in IE7.

Gabe Hollombe · Accepted Answer · 2008-11-03 18:23:40Z

1

@Phil has the answer, above.

Incidentally, using Firebug does, indeed, show the default borders on the textarea and input elements. So, using Firebug might have helped.

answered Nov 3, 2008 at 18:23

Gabe Hollombe

8,0875 gold badges42 silver badges48 bronze badges

1 Comment

Larsenal Over a year ago

It does look fine in FF, but it's still rendering incorrectly in IE7.

Jaime Garcia · Accepted Answer · 2008-11-03 18:17:48Z

0

You could try using this DOCTYPE instead

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

answered Nov 3, 2008 at 18:17

Jaime Garcia

7,1748 gold badges53 silver badges61 bronze badges

1 Comment

philnash Over a year ago

Not having a DOCTYPE will force the browser into quirks mode, using the old, incorrect box model which doesn't coun't the border as part of the width.

Toby Mills · Accepted Answer · 2008-11-03 18:23:08Z

0

Add "padding-right:3px;" to the div so it reads as:

<div style="border: 3px solid green;padding-right:3px; width: 100px;">

Because you have added a border to the div that also counts as internal space of the div.

The reason it works without the doc declaration is that the browser does not render the page as transitional XHTML but plain old html which has a different rendering method for div's etc.

answered Nov 3, 2008 at 18:23

Toby Mills

1,0262 gold badges10 silver badges13 bronze badges

Comments

Rainner · Accepted Answer · 2009-07-18 15:03:20Z

0

xhtml strict code seems to do that with forms. i just make the inputs and textareas stretch at 99% and that seems to work. give that a try.

answered Jul 18, 2009 at 15:03

Rainner

Collectives™ on Stack Overflow

Problem with <input type='text' /> and <textarea> width

6 Answers 6

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related