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, I am having an issue where the textbox extends past the right of the containing div.

Basic example code:

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

The rendering of this control is far more complex than this, but still when the control is stripped down to this level, I have an issue where the textbox sticks out past the containing div.

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

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

Answer 2

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

You can either:

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

An html-element's width is calculated (I think) as the defined width + borders + margin + padding

If you've already defined the input as having 100% width of the parent, and then the other attributes are added it will definitely overflow the parent div.

You can set the margin/padding/borders to 0, but that would likely not look good. So it's easier, though not necessarily perfect, just to use a suitably-smaller width.

You could, of course, use

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

to hide the portion of the input element that would normally overflow the container div.

Answer 3

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)