Stretch a text box the full width of the page with a 5px margin

Question

I'm creating a simple HTML document containing a form that I intend to use as the contents of a panel within a Firefox add-on. At present the document contains a label and text box, and I want this to stretch the full width of the page with a margin of 5px either side. This my code: ``` Phrase Indexer

Passphrase

``` This mostly works, except I'm missing a 5px margin on the right - the text box stretches right to the edge of the page. How can I fix this? Here's a Fiddle of my problem.

Accepted Answer

You can do this way:

```
body
{
   font: 10pt arial, helvetica, sans-serif;
}

div
{
    padding: 0.5em;
}

div > *
{
    width: 100%;
}
```

Here's the JS Bin demo: http://jsbin.com/utabul/1

More on this here: Set CSS 100% Width Minus Padding And Margin

Stretch a text box the full width of the page with a 5px margin

Solution

Problem