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

Grids CSS: nesting yui-gb within yui-gc

Expand Messages
  • takashi37
    Hello - I am having a similar problem to Norman who posted here... http://tech.groups.yahoo.com/group/ydn-javascript/message/37331 ... but the example provide
    Message 1 of 1 , Nov 12, 2008
    • 0 Attachment
      Hello -

      I am having a similar problem to Norman who posted here...

      http://tech.groups.yahoo.com/group/ydn-javascript/message/37331

      ... but the example provide (amazing customer service by the way)
      doesn't exactly meet my needs.

      I am trying to nest a 33/33/33 grid (gb) inside the first column of a
      66/33 grid (gc).

      At the bottom of the post I've provided some example code that's not
      working.

      It seems the 1st inner column isn't as narrow as it should be. In fact
      it seems to be twice as wide as expected.

      I figure I'm supposed to add a "patch" to my css along the lines of...

      <style type="text/css">
      .yui-gb div.first {width:32%;}
      </style>

      ... but I'm trying to figure out (a) why this is the case and (b) if
      that's the correct width for the patch.

      I notice in Norman's example above the width suggested for the patch
      (23.8%) is actually a little narrower than the default width for that
      type of column (24%).

      Any help appreciated.

      Todd
      http://jamtopia.com/

      ------------ EXAMPLE CODE ---------------

      <div class="yui-gc">
      <div class="yui-u first">

      <h3>Top of left outer column</h3>

      <div class="yui-gb">
      <div class="yui-u first">1st inner column</div>
      <div class="yui-u">2nd inner column</div>
      <div class="yui-u">3rd inner column</div>
      </div>

      <p>Bottom of left outer column</p>

      </div>
      <div class="yui-u">

      <h3>Right outer column</h3>
      <p>Stuff here</p>

      </div>
      </div>
    Your message has been successfully submitted and would be delivered to recipients shortly.