Textbox Height 100% When Parent Div has Margins

Question

Browsed some related questions but none seemed to answer mine.

I have something like the following:

<div id="outerdiv" style="width: 50%; height: 100%">
    <div id="innerdiv" style="margin: 5px; height: 100%">
         <textbox>
    </div>
</div>

I want the textbox to take up the full space of the inner div that has margins. Two problems:

If the inner div has height 100%, it overflows because it has margins. I can't have padding on the outer div because the outer div then overflows it's parent etc. The whole layout is a square with four equal sub-squares where each subsquare is like the markup above.

So how can I get the innerdiv to take up the full height but still have the margin I want?

If I set the textbox to 100% width and height, again the margin causes problems and the textbox overflows.

How can I make the textbox take up the full space without overflowing?

Edit:

Fiddles: use this as base and add an outer div with a fixed width and height to see my problem: http://jsfiddle.net/7w8TA/

This is a fiddle I created myself but I'm not sure if it's public or not... : http://jsfiddle.net/LethalLava/mY6Dn/

anmarti anmarti · Accepted Answer · 2012-11-23T09:49:45

Hope this helps you: http://jsfiddle.net/7w8TA/

<div style="width:400px; height:300px">
<div id="outerdiv" style="width: 50%; height: 100%;border:1px solid black" >
    <div id="innerdiv" style="margin: 5px; height: 100%;border:1px solid red" >
        <input type="text" value="textbox" style="width:98%" />
    </div>
</div>

http://jsfiddle.net/mY6Dn/4/

Textbox Height 100% When Parent Div has Margins

1 Answers