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

grids.css - fixed column width within fluid page

Expand Messages
  • bydesignjm
    I love the work done on CSS grids, it just makes things much cleaner and simpler for laying out pages. However, there s nothing in the documentation for one of
    Message 1 of 6 , Jun 6, 2006
    • 0 Attachment
      I love the work done on CSS grids, it just makes things much cleaner
      and simpler for laying out pages. However, there's nothing in the
      documentation for one of the hardest layout problems to solve: a fixed
      column width within a flexible-width page. Is there something in YUI
      to allow for this? I noticed you can make the page dynamic-width by
      setting #doc to width:100%, but when I specify a pixel width on an
      individual column, the other columns don't "fill" the extra space.
      They move over as if the first column were still expanding.

      The only good example I've found of this type of layout with CSS is:
      http://www.tjkdesign.com/articles/3cols.asp

      Unfortunately this layout is cake with tables, but I'd prefer to use
      YUI. Thanks for any help and/or suggestions.
    • Nate Koechley
      Hey bydesignjm, You ve asked a great question. Further and documented support for flexible layouts, as well as support for fixed regions within flexible
      Message 2 of 6 , Jun 6, 2006
      • 0 Attachment
        Hey bydesignjm,

        You've asked a great question. Further and documented support for flexible layouts, as well as support for fixed regions within flexible layouts, are both under investigation for future development. To set your expectations a bit, a new release of grids in not planned for either v0.11 or v0.12.

        I'm glad you discovered that you can modify the width of the #doc to any number, including 100%. This is an undocumented but recommended approach. Another undocumented technique, though it won't help with your current challenge, is that the nested grids can be nested repeatedly creating a practically unlimited number of columns, well beyond the four nested columns that are documented.

        This discrepancy in what is possible versus what is documented and supported is routed in Yahoo! visual design specifications. Since these packages - especially CSS Grids and CSS Fonts - were created for internal use first, those initial design specs persist. As I noted, increased flexibility is likely in a future release.

        Thanks for the kind words and input, and let me know how it goes for you.

        Thanks,
        Nate

        on 6/6/2006 6:13 AM bydesignjm said the following:

        I love the work done on CSS grids, it just makes things much cleaner
        and simpler for laying out pages. However, there's nothing in the
        documentation for one of the hardest layout problems to solve: a fixed
        column width within a flexible-width page. Is there something in YUI
        to allow for this? I noticed you can make the page dynamic-width by
        setting #doc to width:100%, but when I specify a pixel width on an
        individual column, the other columns don't "fill" the extra space.
        They move over as if the first column were still expanding.

        The only good example I've found of this type of layout with CSS is:
        http://www.tjkdesig n.com/articles/ 3cols.asp

        Unfortunately this layout is cake with tables, but I'd prefer to use
        YUI. Thanks for any help and/or suggestions.

      • michael_caplan
        Sorry to drag up an old thread. Does the current version on YUI grids supported a fixed column width in a fluid page? Thanks, Mike ... any ... your ... four
        Message 3 of 6 , Sep 19, 2007
        • 0 Attachment
          Sorry to drag up an old thread. Does the current version on YUI grids
          supported a fixed column width in a fluid page?

          Thanks,

          Mike

          --- In ydn-javascript@yahoogroups.com, Nate Koechley <natek@...> wrote:
          >
          > Hey bydesignjm,
          >
          > You've asked a great question. Further and documented support for
          > flexible layouts, as well as support for fixed regions within flexible
          > layouts, are both under investigation for future development. To set
          > your expectations a bit, a new release of grids in not planned for
          > either v0.11 or v0.12
          > <http://groups.yahoo.com/group/ydn-javascript/message/1568>.
          >
          > I'm glad you discovered that you can modify the width of the #doc to
          any
          > number, including 100%. This is an undocumented but recommended
          > approach. Another undocumented technique, though it won't help with
          your
          > current challenge, is that the nested grids can be nested repeatedly
          > creating a practically unlimited number of columns, well beyond the
          four
          > nested columns that are documented.
          >
          > This discrepancy in what is possible versus what is documented and
          > supported is routed in Yahoo! visual design specifications. Since these
          > packages - especially CSS Grids and CSS Fonts - were created for
          > internal use first, those initial design specs persist. As I noted,
          > increased flexibility is likely in a future release.
          >
          > Thanks for the kind words and input, and let me know how it goes for
          you.
          >
          > Thanks,
          > Nate
          >
          > on 6/6/2006 6:13 AM bydesignjm said the following:
          > >
          > > I love the work done on CSS grids, it just makes things much cleaner
          > > and simpler for laying out pages. However, there's nothing in the
          > > documentation for one of the hardest layout problems to solve: a fixed
          > > column width within a flexible-width page. Is there something in YUI
          > > to allow for this? I noticed you can make the page dynamic-width by
          > > setting #doc to width:100%, but when I specify a pixel width on an
          > > individual column, the other columns don't "fill" the extra space.
          > > They move over as if the first column were still expanding.
          > >
          > > The only good example I've found of this type of layout with CSS is:
          > > http://www.tjkdesign.com/articles/3cols.asp
          > > <http://www.tjkdesign.com/articles/3cols.asp>
          > >
          > > Unfortunately this layout is cake with tables, but I'd prefer to use
          > > YUI. Thanks for any help and/or suggestions.
          > >
          > >
          >
        • snekse
          I m not sure if this is what Mike meant, but I was wondering if you could grid a page to have 3 columns on a fluid page, but have the left and right columns be
          Message 4 of 6 , Jan 30, 2008
          • 0 Attachment
            I'm not sure if this is what Mike meant, but I was wondering if you
            could grid a page to have 3 columns on a fluid page, but have the left
            and right columns be a fixed width. Is that possible?

            --- In ydn-javascript@yahoogroups.com, "michael_caplan" <mcaplan@...>
            wrote:
            >
            > Sorry to drag up an old thread. Does the current version on YUI grids
            > supported a fixed column width in a fluid page?
            >
            > Thanks,
            >
            > Mike
            >
            > --- In ydn-javascript@yahoogroups.com, Nate Koechley <natek@> wrote:
            > >
            > > Hey bydesignjm,
            > >
            > > You've asked a great question. Further and documented support for
            > > flexible layouts, as well as support for fixed regions within
            flexible
            > > layouts, are both under investigation for future development. To set
            > > your expectations a bit, a new release of grids in not planned for
            > > either v0.11 or v0.12
            > > <http://groups.yahoo.com/group/ydn-javascript/message/1568>.
            > >
            > > I'm glad you discovered that you can modify the width of the #doc to
            > any
            > > number, including 100%. This is an undocumented but recommended
            > > approach. Another undocumented technique, though it won't help with
            > your
            > > current challenge, is that the nested grids can be nested repeatedly
            > > creating a practically unlimited number of columns, well beyond the
            > four
            > > nested columns that are documented.
            > >
            > > This discrepancy in what is possible versus what is documented and
            > > supported is routed in Yahoo! visual design specifications. Since
            these
            > > packages - especially CSS Grids and CSS Fonts - were created for
            > > internal use first, those initial design specs persist. As I noted,
            > > increased flexibility is likely in a future release.
            > >
            > > Thanks for the kind words and input, and let me know how it goes for
            > you.
            > >
            > > Thanks,
            > > Nate
            > >
            > > on 6/6/2006 6:13 AM bydesignjm said the following:
            > > >
            > > > I love the work done on CSS grids, it just makes things much cleaner
            > > > and simpler for laying out pages. However, there's nothing in the
            > > > documentation for one of the hardest layout problems to solve: a
            fixed
            > > > column width within a flexible-width page. Is there something in YUI
            > > > to allow for this? I noticed you can make the page dynamic-width by
            > > > setting #doc to width:100%, but when I specify a pixel width on an
            > > > individual column, the other columns don't "fill" the extra space.
            > > > They move over as if the first column were still expanding.
            > > >
            > > > The only good example I've found of this type of layout with CSS is:
            > > > http://www.tjkdesign.com/articles/3cols.asp
            > > > <http://www.tjkdesign.com/articles/3cols.asp>
            > > >
            > > > Unfortunately this layout is cake with tables, but I'd prefer to use
            > > > YUI. Thanks for any help and/or suggestions.
            > > >
            > > >
            > >
            >
          • Nate Koechley
            Hi, YUI Grids provides for a single fixed column via the template present aspect of Grids. http://developer.yahoo.com/yui/grids/#preset_templates It should
            Message 5 of 6 , Feb 4, 2008
            • 0 Attachment
              Hi,

              YUI Grids provides for a single fixed column via the "template present" aspect of Grids. 

              It should be possible for you to modify that part of the code to create other widths, and to use similar techniques to nest a one-fixed-one-fluid structure within the one-fixed-one-fluid structure provided by the Template Presents, but this is not something Grids CSS supports out of the box. 

              (The one-fixed-one-fluid Template Presets are built using "negative margins.")

              Thanks,
              Nate



              On Jan 30, 2008, at 11:11 AM, snekse wrote:

              I'm not sure if this is what Mike meant, but I was wondering if you
              could grid a page to have 3 columns on a fluid page, but have the left
              and right columns be a fixed width. Is that possible? 

              --- In ydn-javascript@ yahoogroups. com, "michael_caplan" <mcaplan@... >
              wrote:
              >
              > Sorry to drag up an old thread. Does the current version on YUI grids
              > supported a fixed column width in a fluid page?
              > 
              > Thanks,
              > 
              > Mike
              > 
              > --- In ydn-javascript@ yahoogroups. com, Nate Koechley <natek@> wrote:
              > >
              > > Hey bydesignjm,
              > > 
              > > You've asked a great question. Further and documented support for 
              > > flexible layouts, as well as support for fixed regions within
              flexible 
              > > layouts, are both under investigation for future development. To set 
              > > your expectations a bit, a new release of grids in not planned for 
              > > either v0.11 or v0.12 
              > > <http://groups. yahoo.com/ group/ydn- javascript/ message/1568>.
              > > 
              > > I'm glad you discovered that you can modify the width of the #doc to
              > any 
              > > number, including 100%. This is an undocumented but recommended 
              > > approach. Another undocumented technique, though it won't help with
              > your 
              > > current challenge, is that the nested grids can be nested repeatedly 
              > > creating a practically unlimited number of columns, well beyond the
              > four 
              > > nested columns that are documented.
              > > 
              > > This discrepancy in what is possible versus what is documented and 
              > > supported is routed in Yahoo! visual design specifications. Since
              these 
              > > packages - especially CSS Grids and CSS Fonts - were created for 
              > > internal use first, those initial design specs persist. As I noted, 
              > > increased flexibility is likely in a future release.
              > > 
              > > Thanks for the kind words and input, and let me know how it goes for
              > you.
              > > 
              > > Thanks,
              > > Nate
              > > 
              > > on 6/6/2006 6:13 AM bydesignjm said the following:
              > > >
              > > > I love the work done on CSS grids, it just makes things much cleaner
              > > > and simpler for laying out pages. However, there's nothing in the
              > > > documentation for one of the hardest layout problems to solve: a
              fixed
              > > > column width within a flexible-width page. Is there something in YUI
              > > > to allow for this? I noticed you can make the page dynamic-width by
              > > > setting #doc to width:100%, but when I specify a pixel width on an
              > > > individual column, the other columns don't "fill" the extra space.
              > > > They move over as if the first column were still expanding.
              > > >
              > > > The only good example I've found of this type of layout with CSS is:
              > > > http://www.tjkdesig n.com/articles/ 3cols.asp 
              > > > <http://www.tjkdesig n.com/articles/ 3cols.asp>
              > > >
              > > > Unfortunately this layout is cake with tables, but I'd prefer to use
              > > > YUI. Thanks for any help and/or suggestions.
              > > >
              > > >
              > >
              >


            • Baer Tierkel
              Has anyone built a 3 column layout with the left and right columns fixed and the middle column fluid? I ve been playing with YUI and the preset templates and
              Message 6 of 6 , Oct 3, 2008
              • 0 Attachment
                Has anyone built a 3 column layout with the left and right columns
                fixed and the middle column fluid?

                I've been playing with YUI and the preset templates and nesting grids
                but haven't been able to make it work...


                --- In ydn-javascript@yahoogroups.com, Nate Koechley <natek@...> wrote:
                >
                > Hi,
                >
                > YUI Grids provides for a single fixed column via the "template
                > present" aspect of Grids.
                > http://developer.yahoo.com/yui/grids/#preset_templates
                >
                > It should be possible for you to modify that part of the code to
                > create other widths, and to use similar techniques to nest a one-fixed-
                > one-fluid structure within the one-fixed-one-fluid structure provided
                > by the Template Presents, but this is not something Grids CSS supports
                > out of the box.
                >
                > (The one-fixed-one-fluid Template Presets are built using "negative
                > margins.")
                >
                > Thanks,
                > Nate
                >
                >
                >
                > On Jan 30, 2008, at 11:11 AM, snekse wrote:
                >
                > > I'm not sure if this is what Mike meant, but I was wondering if you
                > > could grid a page to have 3 columns on a fluid page, but have the left
                > > and right columns be a fixed width. Is that possible?
                > >
                > > --- In ydn-javascript@yahoogroups.com, "michael_caplan" <mcaplan@>
                > > wrote:
                > > >
                > > > Sorry to drag up an old thread. Does the current version on YUI
                > > grids
                > > > supported a fixed column width in a fluid page?
                > > >
                > > > Thanks,
                > > >
                > > > Mike
                > > >
                > > > --- In ydn-javascript@yahoogroups.com, Nate Koechley <natek@> wrote:
                > > > >
                > > > > Hey bydesignjm,
                > > > >
                > > > > You've asked a great question. Further and documented support for
                > > > > flexible layouts, as well as support for fixed regions within
                > > flexible
                > > > > layouts, are both under investigation for future development. To
                > > set
                > > > > your expectations a bit, a new release of grids in not planned for
                > > > > either v0.11 or v0.12
                > > > > <http://groups.yahoo.com/group/ydn-javascript/message/1568>.
                > > > >
                > > > > I'm glad you discovered that you can modify the width of the
                > > #doc to
                > > > any
                > > > > number, including 100%. This is an undocumented but recommended
                > > > > approach. Another undocumented technique, though it won't help
                > > with
                > > > your
                > > > > current challenge, is that the nested grids can be nested
                > > repeatedly
                > > > > creating a practically unlimited number of columns, well beyond
                > > the
                > > > four
                > > > > nested columns that are documented.
                > > > >
                > > > > This discrepancy in what is possible versus what is documented and
                > > > > supported is routed in Yahoo! visual design specifications. Since
                > > these
                > > > > packages - especially CSS Grids and CSS Fonts - were created for
                > > > > internal use first, those initial design specs persist. As I
                > > noted,
                > > > > increased flexibility is likely in a future release.
                > > > >
                > > > > Thanks for the kind words and input, and let me know how it goes
                > > for
                > > > you.
                > > > >
                > > > > Thanks,
                > > > > Nate
                > > > >
                > > > > on 6/6/2006 6:13 AM bydesignjm said the following:
                > > > > >
                > > > > > I love the work done on CSS grids, it just makes things much
                > > cleaner
                > > > > > and simpler for laying out pages. However, there's nothing in
                > > the
                > > > > > documentation for one of the hardest layout problems to solve: a
                > > fixed
                > > > > > column width within a flexible-width page. Is there something
                > > in YUI
                > > > > > to allow for this? I noticed you can make the page dynamic-
                > > width by
                > > > > > setting #doc to width:100%, but when I specify a pixel width
                > > on an
                > > > > > individual column, the other columns don't "fill" the extra
                > > space.
                > > > > > They move over as if the first column were still expanding.
                > > > > >
                > > > > > The only good example I've found of this type of layout with
                > > CSS is:
                > > > > > http://www.tjkdesign.com/articles/3cols.asp
                > > > > > <http://www.tjkdesign.com/articles/3cols.asp>
                > > > > >
                > > > > > Unfortunately this layout is cake with tables, but I'd prefer
                > > to use
                > > > > > YUI. Thanks for any help and/or suggestions.
                > > > > >
                > > > > >
                > > > >
                > > >
                > >
                > >
                > >
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.