How to implement a partially flexible screen layout with a grid framework?

Question

I am trying to implement the following screen layout using a CSS grid framework (BluePrint), but unsuccessfully:

How can achieve this with a grid framework? Does anyone have a CSS/HTML code example to share? Thanks.

P.S.: The reason I want to use a framework is to make sure this layout works in all browsers (any safe framework is ok, it does not have to be BluePrint).

Answer 1

After digging deep into this issue, I got to understand that it is impossible to solve it with a grid framework. The problem is that a couple of heights and widths are derivative of each other. Moreover, depending on the content of the 'central' cell, slide bars may appear too.

I found a long solution involving some Javascript. I first define the different cells of my screen with divs in my HTML. Then, I retrieve the document width and height and set cells' widths and heights using JQuery. I start with fix values, then simple derivatives, then complex derivatives.

For the slide bar issue, I used the trick explained here. I adjust the size of the central column according to the presence of a slide bar, which itself is depending on the height of the 'central' cell, which itself depends on the width of the screen.

Answer 2

YAML should be able to that: http://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_faux_columns.html

or maybe Fluid 960? http://designinfluences.com/fluid960gs/