How to wrap divs like this?

Question

Consider you have a div with fixed height and weight (in the drawing the innermost one), and you want the surrounding divs to contain it, with an out margin of e.g. 1 em. How would you do that?

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

score 5 · Accepted Answer · answered Feb 02 '11 at 20:18

5

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

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's an example: http://jsfiddle.net/redler/zSrXA/

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

answered Feb 02 '11 at 20:18

Ken Redler

23,863
8
57
69

Wow, know that is really nice. But what does the `inline-block` do? I only know `display:inline` and `display:block`. – helpermethod Feb 02 '11 at 20:27
It does pretty much what you'd think. Here's a [good explanation](http://www.quirksmode.org/css/display.html#inlineblock). – Ken Redler Feb 02 '11 at 20:59

score 2 · Answer 2 · answered Feb 02 '11 at 20:30

Here is a variant of Ken Redler's solution that uses margin instead of padding (margin is outside the border, padding is inside the border).

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

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

Here is an example fiddle

Robin Maben · Answer 3 · 2011-02-02T20:34:04.193

1

See the working example here..

<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>

Then use jQuery to wrap the div's as required..

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

edited Feb 02 '11 at 20:34

answered Feb 02 '11 at 20:19

Robin Maben

22,194
16
64
99

2

I'm not sure he's looking for a jQuery-dependent solution. My impression is that it's not the mechanics of the wrapping, but the issue of ensuring the outer divs shrink down, with padding, to wrap the fixed-size inner div. – Ken Redler Feb 02 '11 at 20:24
Exactely. I'm looking for a CSS-only solution. Still a very interesting solution :-). – helpermethod Feb 02 '11 at 20:28
@Ken:Yes, i agree that using jquery was my own assumption. I have also edited my answer/link for the "fixed height/width for inner div" he mentioned. – Robin Maben Feb 02 '11 at 20:36
1

@HelperMethod: You can always do the wrapping manually. i.e. hard-coded. My assumption was that you might want to wrap `n` no. of div's at runtime. :) – Robin Maben Feb 02 '11 at 20:40

score 1 · Answer 4 · answered Feb 02 '11 at 20:27

My solution is the following using 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/

How to wrap divs like this?

4 Answers4

Linked