Here's an example of a nested percentage grid layout. The example uses it for images, but it could be used for anything.

The rows of 6 random images at the top and bottom of the content area are laid out using the same fluid grid system that the page uses, only nested within the content area:

<div class="row">
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
</div>

A percentage based (fluid) grid layout is used, which is recommended if you nest your grids. However, instead of being a percentage of the page, the nested widths are based upon a percentage the surrounding container. The 6 equal columns used for the images in the example are 1/6th of the content area (minus margins and padding).

No special coding is required; this is how CSS handles nested percentage based layouts.

Other Grid Widths

Using the MZ 12 unit grid system, the code could easily be modified to make the rows 2, 3, 4, 6, or 12 images wide. With a little more nesting, rows of multiples of those numbers, such as 8 or 9 could also be made.

For example, to make a row 8 images wide, the grids could be nested twice, first splitting the container into halves, then splitting each half into 4ths:

<div class="row">
  <div class="col6"> 
    <div class="row">
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
    </div>
  </div> 
  <div class="col6">
    <div class="row">
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
    </div>
  </div> 
</div>

Nested grids do not have to be equal widths. Just have each row add up to 12

... unless, of course, you want to intentionally use a partial grid.

Besides the random images at the top of the bottom of the content area, the example now has another usage of nested Montezuma CSS percentage based grids.

The left sidebar is 25% of the whole page, using a col3 div. The remainder of the page is 75% of the entire width, using a col9. Inside that col9 is a header at the top. Under the header, the col9 is subdivided into a col9 content area, which takes up 75% of the remaining 75%, and a col3 right sidebar, which takes up 25% of the remaining 75%.

The layout is drafted below (it's not really code).

****************************************************************
  Left sidebar  |  Remainder of Page 75% of body col9
   col3         |     
  25% of body   |  Header full remainder of page 75% of body
                |***********************************************
		|  Content area                      | 
		|     col9                           | Right
		|  75% of remainder of page          | Sidebar
		|                                    | 25% of 
		|                                    | remainder
		|                                    | of page
		|                                    | col3
		|                                    |
***************************************************************** 
		|  Footer Aligned with Content Area  |
		|                                    |
		|                                    |
*****************************************************************

The basic code for this layout:

<div class = "row">
  <div class = "col3"> [left sidebar] </div>
  <div class = "col9">
    [header]
    <div class = "row">
      <div class = "col9"> [content] </div>
      <div class = "col3"> [right sidebar] </div>
    </div>
  </div>
</div>

<div class = "row">
  <div class = "col3"> &nbsp; </div>
  <div class = "col9">
    <div class = "row">
      <div class = "col9"> [footer] </div>
      <div class = "col3"> &nbsp; </div>
    </div>
  </div>
</div>

hi,
after days of speeding up my site I'm back to design. I like the idea of the full length sidebar. Does give a wider content area in boxed format ?
Well I tried but fail to apply your logic (aim is to have at the right side).
I was assuming this has to be done in index.php.
But below apparently attaches it below the footer:
<div style="background:#777777">

<div id="container">
<div style="background:#ffffff">
<?php get_header(); ?>


<div id="main" class="row">
<div id="content" class="cf col12">

<?php bfa_content_nav( 'multinav1' ); ?>

<?php bfa_loop( 'postformat' ); ?>

<?php bfa_content_nav( 'multinav2' ); ?>

</div>


</div>

<?php get_footer(); ?>

</div>

</div>

<div class="row">
<div id="widgetarea-one" class="col3">
<div class = "col9">
<?php dynamic_sidebar( 'Widget Area ONE' ); ?>
</div>
</div>
</div>

site: dinckol.com
Any hint if this is and how doable ?
Also I understand with the grid setting 100% responsive boxed format is not applicable ?!

Thanks

JerryC hasn't been on the forum since 2013 and as you can see, his suggestions/ideas were not detailed. It was almost like he would tell people what could be done, but not tell them how to do it.

That said, it can be done, but I think there are errors in his code - for example

<div class = "row">
  <div class = "col3"> [left sidebar] </div>
  <div class = "col9">
    [header]
    <div class = "row">
      <div class = "col9"> [content] </div>
      <div class = "col3"> [right sidebar] </div>
    </div>
  </div>
</div>

I beleive the

 <div class = "col9">
    [header]
    <div class = "row">
      <div class = "col9"> [content] </div>

should be

 <div class = "col9">
    [header]
    <div class = "row">
      <div class = "col6"> [content] </div>

since you are creating a row in the '9' columns so try making your index.php look like this

<!--<div id="container">-->
<div class = "row">
  <div class = "col3"><?php dynamic_sidebar( 'left' ); ?>   </div>
  <div class = "col9">	<?php get_header(); ?>
    <div class = "row">
      <div id="content" class="cf col6"> 
      		<?php bfa_content_nav( 'multinav1' ); ?>
		
			<?php bfa_loop( 'postformat' ); ?>
		
			<?php bfa_content_nav( 'multinav2' ); ?>

      </div>
      <div class = "col3"> <?php dynamic_sidebar( 'right' ); ?> </div>
    </div>
  </div>
</div>

<div class = "row">
  <div class = "col3"> &nbsp; </div>
  <div class = "col9">
    <div class = "row">
      <div class = "col6"> <?php get_footer(); ?> </div>
      <div class = "col3"> &nbsp; </div>
    </div>
  </div>
</div>

<!--</div>-->

note you will have to changet the header.php to only use 9 columns too.

Thanks for replying jd
unfortunately I wasn't able to live up to Benjamin Franklin's wisdom, though I call myself a CIO but my brain is sucked out after reading theories, tutorials about the 960 grid system and my incapability to transfer those information into a successful result (a little embarrassment for a CIO)

I know this aint a theme for me as any little change may have a big impact, though it's flexible - but for developers.

I give up for now but can't depart yet as I spent to much time and energy to improve to my gusto ( at least site speed is very good now).

again thx I may return to this challenge after soaking my frustration with beer