Question

Pretty simple html codes:

<div style="position: relative; width: 300px; height: 400px; background-color: red">
    <div style="position: absolute; top:2px;bottom:2px;left:2px;right:2px; background-color: gray">
        content
    </div>
</div>

While I want the inner div will hold all the place inside the outer div with (2px margin).

It works in ff/chrome/ie8 Howver it does not work in ie 6 and 7.

What is the problem?

Answer 1

A suggestion:

If you just need the margin, you can use this code, just with the inner DIV alone:

<div style="background-color: gray; width: 296px; height: 396px; border: 2px solid red;">
    content
</div>

If not just for the border, please see the solution to the IE Fix below.

Pretty simple answer:

You need to set the width and height!

<div style="position: relative; width: 300px; height: 400px; background-color: red">
    <div style="position: absolute; top:2px;bottom:2px;left:2px;right:2px; background-color: gray; width: 296px; height: 396px;">
        content
    </div>
</div>

Screenshot:

Fiddle: http://jsbin.com/okibat/1