1

I'm using Stephen Bau's 960 fluid grid, and I dont think it works with nested grids because each grid is a % of its parent, unless I'm miss using it?

In the stylesheet 

.grid_12 { width:98%, }

So if the viewport is 1200px then <header /> is 1176px, then the nested <nav /> grid is 98% of that making it 1152.48px - if it was the regular 960 fixed grid both would be the same width

<div id="wrap" class="container_12">
   <header class="grid_12">
      <div id="logo" class="grid_6 alpha">
           .. logo img ...
      </div>
      <div id="uti" class="grid_5 prefix_1 omega">
        .. util menu ...
      </div>
    <nav class="grid_12">
       .. nav list ..
    </nav> 
   </header>
   <div id="content class="grid_12">

       <div id="main-content" class="grid_12 clearfix">

             <div id="col-1" class="grid-9 alpha">

              </div>
              <div id="col-2" class="grid-3 omega">

              </div>

       </div>

    </div>

    <footer class="grid_12 clearfix">

     </footer>

</div>
experimenter
  • 768
  • 1
  • 9
  • 30

2 Answers2

0

I faced a similar problem recently and I just put here my fix so anyone who's just bump at a similar problem can find an answer. It's dead simple to nest grids by following a simple rule: all nested grids of a row should sum up to 12 (or 16 or 24 depending of your grid system).

Suppose, you want an outer grid of 7 columns then nest as many grids inside as you want as long as they sum up to 12, e.g.: "grid_1", "grid_5" and "grid_6" would do!

As you might suspect this has nothing to do with pull_i and push_i classes which are just for reordering the "bricks" of a row or changing their source code order. Container grid can be any of grid_i classes and in our example a grid_7! If you need a container with no loss then create one:

.container_12 .full {
width:100%;
}

Actual width in pixels: every child of a parent grid has a width of child% * (parent width in px) / 100 px. So, in our example "grid_1" = 6.25 * (actual "grid_7" in px) / 100 px.

Of course all these come with a cost: by grouping our html tags we've just jumped from semantics to layout definitions when -in theory- we don't want this! The ideal would be to add a class that would do the magic, say "group_1", "group_2" but then we hit wall: rendering follows source code order!

See my answer here.

Community
  • 1
  • 1
centurian
  • 1,168
  • 13
  • 25
0

This is just a limitation of how this (and most other) fluid grids work—since they have to remain, well, fluid.

So really the options are either to put your nested grids in their own containers, or to create a CSS class that you can reuse that resets the width to 100% (naming it something like .grid_full, for example, which could be combined with or without .alpha and .omega to make the element fill its parent).

In reality, these grids are a stop-gap until the CSS layout and templating standards evolve and gain traction.

justbeez
  • 1,367
  • 7
  • 12