How to wrap divs like this?

Question

You have a div with a fixed height and weight (the innermost one in the drawing), and you want the surrounding divs to contain it, with the borders of the field, for example. 1 em. How do you do this?

+--------+
| +-----+|
| |+---+||
| ||   |||
| |+---+||
| +-----+|
+--------+

Answer 1

One way is to use a display style inline-block:

div { border: 1px solid blue; } 
div.wrapper { 
  border: 1px solid red;
  padding: 1em;
  display: inline-block;
}

For this HTML:

<div class="wrapper">
<div class="wrapper">
<div style="width: 100px; height: 83px;">This</div>
</div>
</div>

Here is an example: http://jsfiddle.net/redler/zSrXA/

You can also try playing with display: table-cell.

Answer 2

Here is a Ken Redler solution that uses a field instead of filling (margin is outside the border, the pad is inside the border).

div.inner
{
    border: 1px solid blue;
    margin: 1em;
}

div.outter
{
    border: 1px solid red;
    margin: 1em;
    display: inline-block;
}

Below is an example

Answer 3

. .

<div class="margin1" id="div1">&nbsp;</div>

<style>
.margin1
.margin1{
margin:1em;
    border:1px solid red;
    display:inline-block;
}
#div1{

    height:40px;
    width:20px;
}
</style>

jQuery div, .

$('#div1').wrap('<div class="margin1"/>').wrap('<div class="margin1"/>');

Answer 4

: position:relative:

HTML

<div id="first">
    <div id="second">
        <div id="third"></div>
    </div>
</div>

CSS

div {position:relative;top:1.5em; left:1.5em}
#first {width:200px; height:200px; background:green}
#second {width:150px; height:150px; background:blue}
#third {width:100px; height:100px; background:black}

demo: http://jsfiddle.net/khfMe/