Using blueprint CSS, is it possible to do the following layout

Question

I would like to do the following layout using blueprint css

Page Width = 960px

<- 20px -> <------- 600px -------> <- 20px -> <--- 300px ---> <- 20px ->
   left           main content       middle      right rail     right
  gutter                             gutter      (ad unit)      gutter

What would the appropriate column width, margin-width and number of columns to make this work?

I am trying to do this with 10px columns and 10px margin but it ends up with 30px as the middle gutter (one full column + margin from the right)

Answer 1

Is it possible to do the following layout?

No. Not without reworking the whole framework.

Blueprint CSS uses: 950px width, 10px gutters, and columns that start at 30px and increase by 40px increments. So: 600px would become 590px and 300px would become 310px.

You could tweak the entire framework, adjusting every component's dimensions...

Or, you could adapt your columns to be one of: (30, 70, 110, 150, 190, 230, 270, 310, 350, 390, 430, 470, 510, 550, 590, 630, 670, 710, 750, 790, 830, 870, 910) pixels...

Or, you could try the 960 Grid System. It uses 20px gutters, 960px page width, and 40 or 60px column increments. It doesn't have the nice, canned typography settings. And I'm not sure if it holds up as well, cross-browser and cross-media.

General Layout resource: http://layouts.ironmyers.com/

Answer 2

Out of the box, no. But you can experiment with Blueprint CSS customizers, like:

• Blueprinter
• Blueprint Grid CSS Generator

These essentially take the default Blueprint CSS files, recompute all the numbers, and spit out a new version of the Blueprint CSS framework for you.