HTML input element wider than Containing Div

Question

I have an html element that is contained within a div. Height are dictated by the outer div and the height and width of the input control are 100%. At the most basic level,

Answer 1

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%;
} 


  

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