<div id=”top-level” class=”centered”>

Top Level

<div id=‘second-level’ class=”centered”>

Second Level

<div id=‘our-content’> Our content </div>

</div>

</div>

CSS

.centered {

width:100%;

margin: 0 auto;

border: 1px solid red;

padding: 20px;

}

#second-level {

position: relative;

}

#our-content {

border: 1px solid blue;

}

As you can see, our content sits within its containing div as is expected functionality (see Figure 6.1).

6.1

Now let’s give our content div an ‘absolute’ position and specify where it should sit. When using left, right, top and bottom properties with an absolute positioned element, you are specifying how far from the edge of its parent you want the element to be. Let’s see this in action, updating our CSS like so: