Overlapping grids in 960 Grid System

For example开发者_如何学Python, in a 12-column grid, I want to have a 9-grid-wide and another 4-grid-wide . The divs will have an overlap 1 grid wide in the middle. This is useful for some fancy effects.

Of course I can just use one div and then create more divs inside accordingly (not using the Grid System), but is there a better way?

Or you could organize your layout by yourself with all custom DIVs, that just follows the guidelines the 960GS gives you. There's nothing that tells you that you have to use the premade HTML template to benefit from the concept of the grid system. It's just there as a guide to make sure all widths on the page look good and fit together.

I believe that grid CSS systems were designed to enable quick and easy table-less layouts. They were not designed for this kind of thing. However, there is a third party tool that may interest you. You can find it here: http://gridder.andreehansson.se/

You may however find it easier to just use CSS to layout your DIV elements, overlap them using negative margins and use the z-index property to determine which of the overlapped DIV elements should be on top.