overlapping div layout with grid 960

Question

I´m using the 960 css grid files for a web layout and it works great, but for this layout I need to overlap the divs.

And if I have 2 columns side by side I can overlap the left one by setting class="pull_1" on the right one.

<div class="grid_2">
    <p>
     <img src="../star.jpg" width="236" height="329" style="float:left;">
    </p>
  </div>

<div class="grid_2 pull_1">
    <p>
     <img src="../star.jpg" width="236" height="329" style="float:left;">
    </p>
  </div>

But if I want to overlap upwards? Yes I can set margin-top:-50px; and that will overlap both to the left and upwards.

<div class="grid_2">
    <p>
     <img src="../star.jpg" width="236" height="329" style="float:left;">
    </p>
  </div>

<div class="grid_2 pull_1" style="margin-top:-50px;">
    <p>
     <img src="../star.jpg" width="236" height="329" style="float:left;">
    </p>
  </div>

I want to great a layout like this and I just wonder if this is the way to do it or if anybody has some better way to do it? Thanks!

Answer 1

If you give all of your divs a CSS rule of: position:absolute , you can then set top and left position offsets to create a layout like the one in the photo you posted. Make sure the divs are ordered from back to front if you want the get the layering correct..

Here's a very simple example of what you could do with absolute positioning: http://jsfiddle.net/ZqRgj/1/