Loading ...
Sorry, an error occurred while loading the content.

23316YUI nested grids problem - gb within gc

Expand Messages
  • athanasius815
    Jan 2, 2008
    • 0 Attachment
      bd = 980px width and has a left and right margin of 25px
      |-----------------------------------------------------------|
      | 580px width | 300px width |
      | 24px right margin | 25px left margin |
      | 1px border right | |
      | | |
      | | |
      | | |
      | [ 1/3 ] [ 1/3 ] [ 1/3 ] | |
      | | |
      | | |
      |-----------------------------------------------------------|

      I am having a problem with customizing nested grids.

      First I created a special grid id that overrides the yui-gc since I
      wanted close to, but not exactly 2/3, 1/3:

      #fm-gc .yui-u { width:26.9230em;*width:26.2742em; margin:0; }
      #fm-gc div.first { width:44.6153em;*width:43.5401em; min-width:580px;
      margin:0; padding:0 24px 0 0; border-right:1px solid #c8c8c8; }
      #fm-gc div.last { width:23.0769em;*width:22.5207em; min-width:300px;
      margin:0 0 0 5px;}

      <div id="fm-gc" class="yui-gc">
      <div class="yui-u first">
      Left Column. This is 580px wide with a 24px right margin and a
      1px gray border.
      </div>
      <div class="yui-u last">
      Right Column. This is 300px wide with a 25px left margin.
      </div>
      </div>

      The above works fine. Now I would like to be able to add a 3 column
      nested grid (yui-gb) to the left side. I have tried creating a special
      patch for this as grids do not come with the ability to show GB inside
      of GC by default. This is where I am running into problems:

      #fm-gc .yui-gb .yui-u
      {width:32%;float:right;margin-right:0;_margin-left:0;}
      #fm-gc .yui-gb div.first {margin-left:0;width:32%;}

      <div id="fm-gc" class="yui-gc">
      <div class="yui-u first">
      Left Column. This is 580px wide with a 24px right margin and a
      1px gray border.

      <div class="yui-gb">
      <div class="yui-u first">
      First column.
      </div>
      <div class="yui-u">
      Second column.
      </div>
      <div class="yui-u">
      Third column.
      </div>
      </div>

      </div>
      <div class="yui-u last">
      Right Column. This is 300px wide with a 25px left margin.
      </div>
      </div>


      Any help would be appreciated as I have come this far using grids and
      really do not want to abandon them at this point.

      Thanks,
      Jason