custom centering content in a 960 grid system

Question

I have a 960gs layout but I don't know which is the best approach to center the content of this page (http://andreapuiatti.de/screenshots/question.png) using the 960grid system.

The designer assures that this design is based on 960gs but hell... is everything out of the columns!

The only solution I come up with is that of using a grid_12 and then add custom elements which I will size myself but then why using a grid system?

Answer 1

Decide how many columns the image and text will span, say 12 and create your 12 column row as the parent container (all within the 960 grid framework).

Within that row, I would create a wrapper class (give it a class) and then for the image (or its container) apply a standard CSS rule like margin: 0 auto;. Apply display: block to the image if it is not wrapped in a block level element.

As for the text, the p elements will fill the wrapper element and you can adjust margins as needed.

In general, these CSS grid framework create block level boxes that contain your content, text and images and so on. It is up to the designer to decide how to lay out the elements within each block. 960.gs and similar CSS frameworks define your layout only, not the details of styling the content within each box/block/panel within the grid layout.

About the Screenshot and Designer
Your designer may not understand how grids work and you need to have a discussion with him/her to specify where the edges of the image should be. The problem is not with the CSS framework, but the design specifications need to be more precise. Nothing wrong with that!