CSS: Textbox to Fill Parent Container

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

input[type="text"] {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

<div class="textbox" id="username">
    <div class="before"></div>
    <div class="during">
        <input type="text" value="" />
    </div>
    <div class="after"></div>
</div>

margin: -1em;

input {
    background: red;
    padding: 0;
    width: 100%;
    border: 0; //use 0 instead of "none" for ie7
}

.text-box {
    padding: 0 20px;
    border: solid 1px #000000;
}

<body>
    <div id="x">
        <div id="y">x</div>
        <div class="text-box"><input type="text"/></div>
    </div>
</body>