Question

I have a YUI grid that gives me 4 uneven columns:

  <div class="yui-gc">
    <div class="yui-gd first">
      <div class="yui-u first">Reason</div>
      <div class="yui-u">Scope</div>
    </div>
    <div class="yui-g">
      <div class="yui-u first">Related</div>
      <div class="yui-u">Product</div>
    </div>
  </div>

Below that I want to have 5 columns, with the extra one coming from breaking the Scope column 2/3, 1/3. The closest I can get is 1/2, 1/2 under Scope:

  <div class="yui-gc">
    <div class="yui-gd first">
      <div class="yui-u first">reasons</div>
      <div class="yui-g"> <!-- split Scope column -->
        <div class="yui-u first">questions</div>
        <div class="yui-u">answers</div>
      </div>
    </div>
    <div class="yui-g">
      <div class="yui-u first">stuff</div>
      <div class="yui-u">products</div>
    </div>
  </div>

It seems like changing the div marked <!-- split Scope column --> to <div class="yui-gc"> should do the trick, but it doesn’t.

What am I missing?

Answer 1

as i’m sure you’ve already tried, the .yui-g for your div should be a .yui-gc. it also needs to be either wrapped in a yui-u or have an yui-u class in addition to the yui-gc. however the yui css file trips on itself at this point. The .yui-gd div.first rule comes after the .yui-gc div.first rule in the src and clobbers it. The result is that the columns are arranged 1/3, 2/3 instead of 2/3, 1/3 like they should be.

The simplest (as hacky as it may be) way to fix would to just put in an inline declaration to put the column widths back to where they should be.

<div class="yui-gc">
<div class="yui-gd first">
    <div class="yui-u first">reasons</div>
    <div class="yui-u yui-gc">
        <div class="yui-u first" style="width: 66%;">questions</div>
        <div class="yui-u" style="width: 32%;">answers</div>
    </div>
</div>

<div class="yui-u yui-g">
    <div class="yui-u first">Related</div>
    <div class="yui-u">Product</div>
</div>