html - 3divs with internal margin -

i want 3 divs internal margin (without padding) below:

+---------------------+ |         15px        | | +-----------------+ | | |       20px      | | | | +-------------+ | | | | |             | | | | | |             | | | | | |             | | | | | |             | | | | | +-------------+ | | | +-----------------+ | +---------------------+ 

i used following style 3 divs:

#outer{  width: 800px;  height: 800px;  position: absolute; } #middle{   width: 750px;   height: 750px;   position: relative;   margin-top: 15px; } #inner{   width: 700px;   height: 700px;   margin-top: 20px; } 

by above style, excluding inner div, margin works , positions properly. if place inner div, margin-top becomes margin of inner div this:

+---------------------+ |         20px        | | +-----------------+ | | | +-------------+ | | | | |             | | | | |             | | | | | |             | | | | | |             | | | | | |             | | | | | +-------------+ | | | +-----------------+ | +---------------------+ 

i.e, margin-top of middle div increases 15px 20px (which margin-top of inner div), if give position: relative inner div. can accomplish desired margin applying padding middle div (padding-top: 20px). want accomplish these margins without padding. if want type of margins 3, 4 or more numbers of divs, how it? appreciated?

please check out fiddle http://jsfiddle.net/jzucm/, after?

i have updated css this:

#outer{  width: 800px;  height: 800px;  position: absolute;     background:yellow; } #middle{   width: 750px;   height: 750px;   position: relative;   margin: 15px 25px 0px 25px;     background:red; } #inner{   width: 700px;   height: 700px;   top: 20px;   left:25px;   position:absolute;   background:green; } 

essentially made 3rd div absolutely positioned relative parent (middle div). disregard background colors, added them can see what's happening.