When working with a div of fixed width that contains only an input text box, and the width of the input is set to 100%, you may notice that it extends slightly beyond the boundaries of the div.
For demonstration purposes, consider the following code:
HTML:
<div class="container">
<input class="content" id="Text1" type="text" />
</div>
CSS:
.container
{
width: 300px;
height: 30px;
border: thin solid red;
}
.content
{
width: 100%;
}
Results may vary across different browsers such as Firefox, IE 8, Chrome, and Safari. The overflow width seems inconsistent.
If you're looking to make the content fit precisely within the width of the div, how can this be achieved?