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

YUI nested grids problem - gb within gc

Expand Messages
  • athanasius815
    bd = 980px width and has a left and right margin of 25px ... I am having a problem with customizing nested grids. First I created a special grid id that
    Message 1 of 1 , 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
    Your message has been successfully submitted and would be delivered to recipients shortly.