Элемент ввода HTML шире, чем Содержание Отделения

Instead of applying the style directly on the input element, maybe abstract the CSS into a file and use classes:

div.field_container
{
  height: 25px;
  width: 150px;
}

div.field_container input
{
  height: 100%;
  width: 100%;
} 

<div class="field_container">
  <input type="text" name="" value="" />
</div>

I am running out the door before I could test if this helps at all, but at the very least, you could play with max-height/width settings on the DIV css to make it not break if my solution doesn't work. And having the CSS abstracted like this makes problems easier to solve using a plugin like Firebug in Firefox.

Question though, is there a need to enclose the input tag in it's own DIV? I wouldn't be surprised if there is just a better layout you could build that would avoid the need to do this...

unfortunately this will depend on the browser you are working with but setting the width of the object (the textbox) does not take into account the width of the border on the object. most browsers only take into consideration any padding from the outer object and margins from the contained object but a few (i'm looking at you IE) do not add in the border when calculating percentages;

your best bet is to change the border on the textbox or to throw in another div between teh textbox and the container with a padding of say 2px with a margin-top: -2px and a margin-left:-2px (i'm guessing at the border width)

I'm assuming that you want the contained element () to be smaller than, or contained entirely within, the

input {width: 50%; /* or whatever */ }

#parent_div {overflow: hidden; /* or 'auto' or whatever */}