Home/ Questions/Q 76687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T20:42:45+00:00

In the following code, both the INPUT and TEXTAREA elements render wider than they

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    • 0