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

Re: [ydn-javascript] can anyone tell me why this grid doesn't render properly?

Expand Messages
  • Matt Sweeney
    Hi Julie, Your grid markup is incomplete. The yui-main id wrapper is required around the content grid. The content block inside of yui-main requires the
    Message 1 of 14 , Nov 3, 2009
    View Source
    • 0 Attachment
      Hi Julie,

      Your grid markup is incomplete. The "yui-main" id wrapper is required
      around the content grid. The content block inside of yui-main requires
      the "yui-b" class wrapper.

      ...
      <div id="yui-main">
      <div class="yui-b">
      <div class="yui-gc">
      <div class="yui-gb first">
      <div class="yui-u first">col 1.a</div>
      <div class="yui-u">col 1.b</div>
      <div class="yui-u">col 1.c</div>
      </div>
      <div class="yui-gc">
      <div class="yui-u first">col 2.a</div>
      <div class="yui-u">col 2.b</div>
      </div>
      </div>
      </div>
      </div>
      </div>
      ...

      I recommend starting with the Grid Builder[1] to get the basic template
      together before nesting grids.

      -Matt

      [1] http://developer.yahoo.com/yui/grids/builder/

      juliebonniedaisy wrote:
      > It is supposed to be 2/3 - 1/3
      > inside the 2/3, divided into 3
      > inside the 1/3, divided into 2/3 - 1/3
      > Thanks !
      >
      >
      > <div id="doc2">
      >
      > <div id="bd">
      >
      > <div class="yui-gc">
      > <div class="yui-gb first">
      > <div class="yui-u first">col 1.a</div>
      > <div class="yui-u">col 1.b</div>
      > <div class="yui-u">col 1.c</div>
      > </div>
      > <div class="yui-gc">
      > <div class="yui-u first">col 2.a</div>
      > <div class="yui-u">col 2.b</div>
      > </div>
      > </div>
      > </div>
      > </div>
      >
      >
    • juliebonniedaisy
      Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest
      Message 2 of 14 , Nov 4, 2009
      View Source
      • 0 Attachment
        Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.

        Everything should stay on the same line though.

        <body class="yui-skin-sam main">

        <div id="doc3">

        <div id="bd">
        <div id="yui-main"> <!-- primary content -->
        <div class="yui-b"> <!-- basic block -->
        <div class="yui-gc"> <!-- 2/3 - 1/3 -->
        <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
        <div class="yui-u first">col 1.a</div> <!-- first unit -->
        <div class="yui-u">col 1.b</div> <!-- unit -->
        <div class="yui-u">col 1.c</div> <!-- unit -->
        </div>
        <div class="yui-gc"> <!-- 2/3 - 1/3 -->
        <div class="yui-u first">col 2.a</div> <!-- first unit -->
        <div class="yui-u">col 2.b</div> <!-- unit -->
        </div>
        </div>
        </div>
        </div>
        </div>


        </div>


        </body>
      • Christian Tiberg
        What finally got how this worked into my head is the 960 grid system. Their simple image said it all, and the code was easy to read. But I don t copy it
        Message 3 of 14 , Nov 4, 2009
        View Source
        • 0 Attachment
          What finally got how this worked into my head is the 960 grid system. Their simple image said it all, and the code was easy to read. But I don't copy it verbatim, now I know enough to write my own :)


          Best regards,
           Christian Tiberg


          2009/11/4 juliebonniedaisy <juliebonniedaisy@...>
           

          Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.

          Everything should stay on the same line though.

          <body class="yui-skin-sam main">

          <div id="doc3">

          <div id="bd">
          <div id="yui-main"> <!-- primary content -->
          <div class="yui-b"> <!-- basic block -->
          <div class="yui-gc"> <!-- 2/3 - 1/3 -->
          <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
          <div class="yui-u first">col 1.a</div> <!-- first unit -->
          <div class="yui-u">col 1.b</div> <!-- unit -->
          <div class="yui-u">col 1.c</div> <!-- unit -->
          </div>
          <div class="yui-gc"> <!-- 2/3 - 1/3 -->
          <div class="yui-u first">col 2.a</div> <!-- first unit -->
          <div class="yui-u">col 2.b</div> <!-- unit -->


          </div>
          </div>
          </div>
          </div>
          </div>


          </div>

          </body>


        • juliebonniedaisy
          surely it s not necessary to learn an entirely different grid system to make this one work. lets not over complicate it please. if you see the problem
          Message 4 of 14 , Nov 4, 2009
          View Source
          • 0 Attachment
            surely it's not necessary to learn an entirely different grid system to make this one work. lets not over complicate it please. if you see the problem please let me know.

            Regards...

            --- In ydn-javascript@yahoogroups.com, Christian Tiberg <ctiberg@...> wrote:
            >
            > What finally got how this worked into my head is the 960 grid system. Their
            > simple image said it all, and the code was easy to read. But I don't copy it
            > verbatim, now I know enough to write my own :)
            >
            > http://960.gs/
            >
            > Best regards,
            > Christian Tiberg
            >
            >
            > 2009/11/4 juliebonniedaisy <juliebonniedaisy@...>
            >
            > >
            > >
            > > Thank you for the reply. I have used the grid builder many times and i
            > > notice it does not include yui-main in the code it generates. Here is my
            > > latest attempt based on your example but i'm finding col 1.c is going to the
            > > next line and col 2.a and b go on a third line.
            > >
            > > Everything should stay on the same line though.
            > >
            > > <body class="yui-skin-sam main">
            > >
            > > <div id="doc3">
            > >
            > > <div id="bd">
            > > <div id="yui-main"> <!-- primary content -->
            > > <div class="yui-b"> <!-- basic block -->
            > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
            > > <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
            > > <div class="yui-u first">col 1.a</div> <!-- first unit -->
            > > <div class="yui-u">col 1.b</div> <!-- unit -->
            > > <div class="yui-u">col 1.c</div> <!-- unit -->
            > > </div>
            > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
            > > <div class="yui-u first">col 2.a</div> <!-- first unit -->
            > > <div class="yui-u">col 2.b</div> <!-- unit -->
            > >
            > > </div>
            > > </div>
            > > </div>
            > > </div>
            > > </div>
            > >
            > >
            > > </div>
            > >
            > > </body>
            > >
            > >
            > >
            >
          • Matt Sweeney
            Hi Julie, The issue is with the cascading rules. The units are incorrectly inheriting the -gc rather than -gb. Adding the following to your stylesheet should
            Message 5 of 14 , Nov 4, 2009
            View Source
            • 0 Attachment
              Hi Julie,

              The issue is with the cascading rules. The units are incorrectly
              inheriting the -gc rather than -gb.

              Adding the following to your stylesheet should resolve it:
              .yui-gc .yui-gb .yui-u {
              float: left;
              width: 32%;
              }


              I double-checked the grid builder, and it does include the full markup
              template, including the "yui-main" div, but that isn't the issue here.
              This is exactly the type of issue I am resolving with the updated yui3
              grids.

              Sorry about the hassle.

              -Matt

              juliebonniedaisy wrote:
              > Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
              >
              > Everything should stay on the same line though.
              >
              > <body class="yui-skin-sam main">
              >
              > <div id="doc3">
              >
              > <div id="bd">
              > <div id="yui-main"> <!-- primary content -->
              > <div class="yui-b"> <!-- basic block -->
              > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
              > <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
              > <div class="yui-u first">col 1.a</div> <!-- first unit -->
              > <div class="yui-u">col 1.b</div> <!-- unit -->
              > <div class="yui-u">col 1.c</div> <!-- unit -->
              > </div>
              > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
              > <div class="yui-u first">col 2.a</div> <!-- first unit -->
              > <div class="yui-u">col 2.b</div> <!-- unit -->
              > </div>
              > </div>
              > </div>
              > </div>
              > </div>
              >
              >
              > </div>
              >
              >
              > </body>
              >
              >
              >
              >
            • Christian Tiberg
              Sure, do it your way :) It was just a friendly note. I didn t learn that system at all, and I m not using the YUI grids system either. I simply learned enough
              Message 6 of 14 , Nov 4, 2009
              View Source
              • 0 Attachment
                Sure, do it your way :) It was just a friendly note. I didn't learn that system at all, and I'm not using the YUI grids system either. I simply learned enough CSS to roll my own.

                The only thing I needed was to realize that setting float: none, display:inline on a div makes it work.

                Best regards,
                 Christian Tiberg


                2009/11/5 Matt Sweeney <msweeney@...>
                 

                Hi Julie,

                The issue is with the cascading rules. The units are incorrectly
                inheriting the -gc rather than -gb.

                Adding the following to your stylesheet should resolve it:
                .yui-gc .yui-gb .yui-u {
                float: left;
                width: 32%;
                }

                I double-checked the grid builder, and it does include the full markup
                template, including the "yui-main" div, but that isn't the issue here.
                This is exactly the type of issue I am resolving with the updated yui3
                grids.

                Sorry about the hassle.

                -Matt



                juliebonniedaisy wrote:
                > Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
                >
                > Everything should stay on the same line though.
                >
                > <body class="yui-skin-sam main">
                >
                > <div id="doc3">
                >
                > <div id="bd">
                > <div id="yui-main"> <!-- primary content -->
                > <div class="yui-b"> <!-- basic block -->
                > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                > <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
                > <div class="yui-u first">col 1.a</div> <!-- first unit -->
                > <div class="yui-u">col 1.b</div> <!-- unit -->
                > <div class="yui-u">col 1.c</div> <!-- unit -->
                > </div>
                > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                > <div class="yui-u first">col 2.a</div> <!-- first unit -->
                > <div class="yui-u">col 2.b</div> <!-- unit -->
                > </div>
                > </div>
                > </div>
                > </div>
                > </div>
                >
                >
                > </div>
                >
                >
                > </body>
                >
                >
                >
                >


              • juliebonniedaisy
                Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
                Message 7 of 14 , Nov 5, 2009
                View Source
                • 0 Attachment
                  Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?

                  --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
                  >
                  > Hi Julie,
                  >
                  > The issue is with the cascading rules. The units are incorrectly
                  > inheriting the -gc rather than -gb.
                  >
                  > Adding the following to your stylesheet should resolve it:
                  > .yui-gc .yui-gb .yui-u {
                  > float: left;
                  > width: 32%;
                  > }
                  >
                  >
                  > I double-checked the grid builder, and it does include the full markup
                  > template, including the "yui-main" div, but that isn't the issue here.
                  > This is exactly the type of issue I am resolving with the updated yui3
                  > grids.
                  >
                  > Sorry about the hassle.
                  >
                  > -Matt
                  >
                  > juliebonniedaisy wrote:
                  > > Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
                  > >
                  > > Everything should stay on the same line though.
                  > >
                  > > <body class="yui-skin-sam main">
                  > >
                  > > <div id="doc3">
                  > >
                  > > <div id="bd">
                  > > <div id="yui-main"> <!-- primary content -->
                  > > <div class="yui-b"> <!-- basic block -->
                  > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                  > > <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
                  > > <div class="yui-u first">col 1.a</div> <!-- first unit -->
                  > > <div class="yui-u">col 1.b</div> <!-- unit -->
                  > > <div class="yui-u">col 1.c</div> <!-- unit -->
                  > > </div>
                  > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                  > > <div class="yui-u first">col 2.a</div> <!-- first unit -->
                  > > <div class="yui-u">col 2.b</div> <!-- unit -->
                  > > </div>
                  > > </div>
                  > > </div>
                  > > </div>
                  > > </div>
                  > >
                  > >
                  > > </div>
                  > >
                  > >
                  > > </body>
                  > >
                  > >
                  > >
                  > >
                  >
                • juliebonniedaisy
                  Christian, that sounds like good advice. I ll have to dig in a bit more to figure this out. Thank you again.
                  Message 8 of 14 , Nov 5, 2009
                  View Source
                  • 0 Attachment
                    Christian, that sounds like good advice. I'll have to dig in a bit more to figure this out. Thank you again.

                    --- In ydn-javascript@yahoogroups.com, Christian Tiberg <ctiberg@...> wrote:
                    >
                    > Sure, do it your way :) It was just a friendly note. I didn't learn that
                    > system at all, and I'm not using the YUI grids system either. I simply
                    > learned enough CSS to roll my own.
                    >
                    > The only thing I needed was to realize that setting float: none,
                    > display:inline on a div makes it work.
                    >
                    > Best regards,
                    > Christian Tiberg
                    >
                    >
                    > 2009/11/5 Matt Sweeney <msweeney@...>
                    >
                    > >
                    > >
                    > > Hi Julie,
                    > >
                    > > The issue is with the cascading rules. The units are incorrectly
                    > > inheriting the -gc rather than -gb.
                    > >
                    > > Adding the following to your stylesheet should resolve it:
                    > > .yui-gc .yui-gb .yui-u {
                    > > float: left;
                    > > width: 32%;
                    > > }
                    > >
                    > > I double-checked the grid builder, and it does include the full markup
                    > > template, including the "yui-main" div, but that isn't the issue here.
                    > > This is exactly the type of issue I am resolving with the updated yui3
                    > > grids.
                    > >
                    > > Sorry about the hassle.
                    > >
                    > > -Matt
                    > >
                    > >
                    > > juliebonniedaisy wrote:
                    > > > Thank you for the reply. I have used the grid builder many times and i
                    > > notice it does not include yui-main in the code it generates. Here is my
                    > > latest attempt based on your example but i'm finding col 1.c is going to the
                    > > next line and col 2.a and b go on a third line.
                    > > >
                    > > > Everything should stay on the same line though.
                    > > >
                    > > > <body class="yui-skin-sam main">
                    > > >
                    > > > <div id="doc3">
                    > > >
                    > > > <div id="bd">
                    > > > <div id="yui-main"> <!-- primary content -->
                    > > > <div class="yui-b"> <!-- basic block -->
                    > > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                    > > > <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
                    > > > <div class="yui-u first">col 1.a</div> <!-- first unit -->
                    > > > <div class="yui-u">col 1.b</div> <!-- unit -->
                    > > > <div class="yui-u">col 1.c</div> <!-- unit -->
                    > > > </div>
                    > > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                    > > > <div class="yui-u first">col 2.a</div> <!-- first unit -->
                    > > > <div class="yui-u">col 2.b</div> <!-- unit -->
                    > > > </div>
                    > > > </div>
                    > > > </div>
                    > > > </div>
                    > > > </div>
                    > > >
                    > > >
                    > > > </div>
                    > > >
                    > > >
                    > > > </body>
                    > > >
                    > > >
                    > > >
                    > > >
                    > >
                    > >
                    > >
                    >
                  • juliebonniedaisy
                    Also, the builder only displays a yui-main div for me if I add a sidebar.
                    Message 9 of 14 , Nov 5, 2009
                    View Source
                    • 0 Attachment
                      Also, the builder only displays a yui-main div for me if I add a sidebar.

                      --- In ydn-javascript@yahoogroups.com, "juliebonniedaisy" <juliebonniedaisy@...> wrote:
                      >
                      > Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
                      >
                      > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@> wrote:
                      > >
                      > > Hi Julie,
                      > >
                      > > The issue is with the cascading rules. The units are incorrectly
                      > > inheriting the -gc rather than -gb.
                      > >
                      > > Adding the following to your stylesheet should resolve it:
                      > > .yui-gc .yui-gb .yui-u {
                      > > float: left;
                      > > width: 32%;
                      > > }
                      > >
                      > >
                      > > I double-checked the grid builder, and it does include the full markup
                      > > template, including the "yui-main" div, but that isn't the issue here.
                      > > This is exactly the type of issue I am resolving with the updated yui3
                      > > grids.
                      > >
                      > > Sorry about the hassle.
                      > >
                      > > -Matt
                      > >
                      > > juliebonniedaisy wrote:
                      > > > Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
                      > > >
                      > > > Everything should stay on the same line though.
                      > > >
                      > > > <body class="yui-skin-sam main">
                      > > >
                      > > > <div id="doc3">
                      > > >
                      > > > <div id="bd">
                      > > > <div id="yui-main"> <!-- primary content -->
                      > > > <div class="yui-b"> <!-- basic block -->
                      > > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                      > > > <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
                      > > > <div class="yui-u first">col 1.a</div> <!-- first unit -->
                      > > > <div class="yui-u">col 1.b</div> <!-- unit -->
                      > > > <div class="yui-u">col 1.c</div> <!-- unit -->
                      > > > </div>
                      > > > <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                      > > > <div class="yui-u first">col 2.a</div> <!-- first unit -->
                      > > > <div class="yui-u">col 2.b</div> <!-- unit -->
                      > > > </div>
                      > > > </div>
                      > > > </div>
                      > > > </div>
                      > > > </div>
                      > > >
                      > > >
                      > > > </div>
                      > > >
                      > > >
                      > > > </body>
                      > > >
                      > > >
                      > > >
                      > > >
                      > >
                      >
                    • Matt Sweeney
                      Hi Julie, I ve posted my working version here: http://yuilibrary.com/~msweeney/yui2/grids/nested_gc-gb.html -Matt
                      Message 10 of 14 , Nov 5, 2009
                      View Source
                      • 0 Attachment
                        Hi Julie,

                        I've posted my working version here:
                        http://yuilibrary.com/~msweeney/yui2/grids/nested_gc-gb.html

                        -Matt

                        juliebonniedaisy wrote:
                        > Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
                        >
                        > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
                        >> Hi Julie,
                        >>
                        >> The issue is with the cascading rules. The units are incorrectly
                        >> inheriting the -gc rather than -gb.
                        >>
                        >> Adding the following to your stylesheet should resolve it:
                        >> .yui-gc .yui-gb .yui-u {
                        >> float: left;
                        >> width: 32%;
                        >> }
                        >>
                        >>
                        >> I double-checked the grid builder, and it does include the full markup
                        >> template, including the "yui-main" div, but that isn't the issue here.
                        >> This is exactly the type of issue I am resolving with the updated yui3
                        >> grids.
                        >>
                        >> Sorry about the hassle.
                        >>
                        >> -Matt
                        >>
                        >> juliebonniedaisy wrote:
                        >>> Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
                        >>>
                        >>> Everything should stay on the same line though.
                        >>>
                        >>> <body class="yui-skin-sam main">
                        >>>
                        >>> <div id="doc3">
                        >>>
                        >>> <div id="bd">
                        >>> <div id="yui-main"> <!-- primary content -->
                        >>> <div class="yui-b"> <!-- basic block -->
                        >>> <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                        >>> <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
                        >>> <div class="yui-u first">col 1.a</div> <!-- first unit -->
                        >>> <div class="yui-u">col 1.b</div> <!-- unit -->
                        >>> <div class="yui-u">col 1.c</div> <!-- unit -->
                        >>> </div>
                        >>> <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                        >>> <div class="yui-u first">col 2.a</div> <!-- first unit -->
                        >>> <div class="yui-u">col 2.b</div> <!-- unit -->
                        >>> </div>
                        >>> </div>
                        >>> </div>
                        >>> </div>
                        >>> </div>
                        >>>
                        >>>
                        >>> </div>
                        >>>
                        >>>
                        >>> </body>
                        >>>
                        >>>
                        >>>
                        >>>
                        >
                      • juliebonniedaisy
                        Thanks, it works great now, I was missing the yui-u on yui-gb and yui-gc. Thanks again Matt.
                        Message 11 of 14 , Nov 5, 2009
                        View Source
                        • 0 Attachment
                          Thanks, it works great now, I was missing the yui-u on yui-gb and yui-gc. Thanks again Matt.

                          --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
                          >
                          > Hi Julie,
                          >
                          > I've posted my working version here:
                          > http://yuilibrary.com/~msweeney/yui2/grids/nested_gc-gb.html
                          >
                          > -Matt
                          >
                          > juliebonniedaisy wrote:
                          > > Thanks for the reply but the 2nd section(yui-gc) is still going to the 2nd line. Any ideas?
                          > >
                          > > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@> wrote:
                          > >> Hi Julie,
                          > >>
                          > >> The issue is with the cascading rules. The units are incorrectly
                          > >> inheriting the -gc rather than -gb.
                          > >>
                          > >> Adding the following to your stylesheet should resolve it:
                          > >> .yui-gc .yui-gb .yui-u {
                          > >> float: left;
                          > >> width: 32%;
                          > >> }
                          > >>
                          > >>
                          > >> I double-checked the grid builder, and it does include the full markup
                          > >> template, including the "yui-main" div, but that isn't the issue here.
                          > >> This is exactly the type of issue I am resolving with the updated yui3
                          > >> grids.
                          > >>
                          > >> Sorry about the hassle.
                          > >>
                          > >> -Matt
                          > >>
                          > >> juliebonniedaisy wrote:
                          > >>> Thank you for the reply. I have used the grid builder many times and i notice it does not include yui-main in the code it generates. Here is my latest attempt based on your example but i'm finding col 1.c is going to the next line and col 2.a and b go on a third line.
                          > >>>
                          > >>> Everything should stay on the same line though.
                          > >>>
                          > >>> <body class="yui-skin-sam main">
                          > >>>
                          > >>> <div id="doc3">
                          > >>>
                          > >>> <div id="bd">
                          > >>> <div id="yui-main"> <!-- primary content -->
                          > >>> <div class="yui-b"> <!-- basic block -->
                          > >>> <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                          > >>> <div class="yui-gb first"> <!-- 1/3 - 1/3 - 1/3 -->
                          > >>> <div class="yui-u first">col 1.a</div> <!-- first unit -->
                          > >>> <div class="yui-u">col 1.b</div> <!-- unit -->
                          > >>> <div class="yui-u">col 1.c</div> <!-- unit -->
                          > >>> </div>
                          > >>> <div class="yui-gc"> <!-- 2/3 - 1/3 -->
                          > >>> <div class="yui-u first">col 2.a</div> <!-- first unit -->
                          > >>> <div class="yui-u">col 2.b</div> <!-- unit -->
                          > >>> </div>
                          > >>> </div>
                          > >>> </div>
                          > >>> </div>
                          > >>> </div>
                          > >>>
                          > >>>
                          > >>> </div>
                          > >>>
                          > >>>
                          > >>> </body>
                          > >>>
                          > >>>
                          > >>>
                          > >>>
                          > >
                          >
                        Your message has been successfully submitted and would be delivered to recipients shortly.