Hi,
I'm trying to let an <input type="text"> (henceforth referred to as “textbox”) fill a parent container by settings its width to 100%. This works until I give the textbox a padding. This is then added to the content width and the input field overflows. Notice that in Firefox this only happens when rendering the content as standards compliant. In quirks mode, another box model seems to apply.
Here's a minimal code to reproduce the behaviour in all modern browsers.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<title>Test</title>
<style type="text/css">
#x {
background: salmon;
padding: 1em;
}
#y {
background: red;
padding: 0 20px;
width: 100%;
}
input {
background: red;
padding: 0 20px;
width: 100%;
}
</style>
</head>
<body>
<div id="x">
<div id="y">x</div>
<input type="text"/>
</div>
</body>
</html>
My question: How do I get the textbox to fit the container?
Notice: for the <div id="y">, this is straightforward: simply set width: auto. However, if I try to do this for the textbox, the effect is different and the textbox takes its default row count as width (even if I set display: block for the textbox).
/EDIT: David's “solution” would of course work. However, I do not want to modify the HTML – I do especially not want to add dummy elements with no semantic functionality. This is a typical case of divitis that I want to avoid at all cost. This can only be a last-resort hack.