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

Re: YUI grids - space between main & side columns

Expand Messages
  • wally.ritchie
    ... preset -- ... The gutter is built into the design. The style rule that sets this for a t-4 is: .yui-t4 #yui-main .yui-b { margin-right: 14.8456em;
    Message 1 of 4 , Jul 1, 2008
    • 0 Attachment
      --- In ydn-javascript@yahoogroups.com, "alexknowles090"
      <alexknowles090@...> wrote:
      >
      > Hi all
      >
      > using #doc4 and the .yui-t4 template preset, I'm getting a 15 px gap
      > between the main div and the sidebar (code below). Try as I might I
      > can't seem to remove it so that the two elements sit flush next to
      > each other.
      >
      > I've tried setting "margin: 0px" on #content, #bd, #yui-main and
      > #sidebar with no luck
      >
      > can any help?
      >
      > thanks
      > alex
      >
      >
      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > "http://www.w3.org/TR/html4/strict.dtd">
      > <html>
      > <head>
      > <title>YUI Grids CSS </title>
      > <!-- Source File -->
      > <link rel="stylesheet" type="text/css"
      > href="/stylesheets/reset-fonts-grids.css">
      > </head>
      > <body>
      > <div id="doc4" class="yui-t4"> <!-- change class to change
      preset -->
      >
      > <div id="hd"><p>Header</p></div>
      >
      > <div id="bd">
      > <div id="yui-main">
      > <div class="yui-b" id="content">
      > <p>Main content</p>
      > </div>
      > </div>
      > <div class="yui-b" id="sidebar">
      > <p>Sidebar</p>
      > </div>
      > </div>
      >
      > <div id="ft"></div>
      >
      > </div>
      > </body>
      > </html>
      >
      The gutter is built into the design.
      The style rule that sets this for a t-4 is:

      .yui-t4 #yui-main .yui-b { margin-right: 14.8456em;
      *margin-right 14.55em; }

      changing this to 13.8456em for firefox et al and 13.57 for IE should
      work, i.e. :

      .yui-t4 #yui-main .yui-b { margin-right: 13.8456em;
      *margin-right 13.57em; }

      Make sure you test across all browsers and don't expect pixel perfect
      results across all browsers.
    • Nate Koechley
      Hey Alex, Wally s advice is good. For a bit more detail, he s a post I wrote a while ago discussing how to customize the width of the template presets. Note
      Message 2 of 4 , Jul 1, 2008
      • 0 Attachment
        Hey Alex,

        Wally's advice is good. For a bit more detail, he's a post I wrote a
        while ago discussing how to customize the width of the template
        presets. Note that the difference between the width of the two columns
        is the gutter, so keep that in mind as you're specifying your new
        dimensions.

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

        Hope that helps.

        Thanks,
        Nate

        On Jul 1, 2008, at 9:06 AM, wally.ritchie wrote:

        > --- In ydn-javascript@yahoogroups.com, "alexknowles090"
        > <alexknowles090@...> wrote:
        >>
        >> Hi all
        >>
        >> using #doc4 and the .yui-t4 template preset, I'm getting a 15 px gap
        >> between the main div and the sidebar (code below). Try as I might I
        >> can't seem to remove it so that the two elements sit flush next to
        >> each other.
        >>
        >> I've tried setting "margin: 0px" on #content, #bd, #yui-main and
        >> #sidebar with no luck
        >>
        >> can any help?
        >>
        >> thanks
        >> alex
        >>
        >>
        >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        >> "http://www.w3.org/TR/html4/strict.dtd">
        >> <html>
        >> <head>
        >> <title>YUI Grids CSS </title>
        >> <!-- Source File -->
        >> <link rel="stylesheet" type="text/css"
        >> href="/stylesheets/reset-fonts-grids.css">
        >> </head>
        >> <body>
        >> <div id="doc4" class="yui-t4"> <!-- change class to change
        > preset -->
        >>
        >> <div id="hd"><p>Header</p></div>
        >>
        >> <div id="bd">
        >> <div id="yui-main">
        >> <div class="yui-b" id="content">
        >> <p>Main content</p>
        >> </div>
        >> </div>
        >> <div class="yui-b" id="sidebar">
        >> <p>Sidebar</p>
        >> </div>
        >> </div>
        >>
        >> <div id="ft"></div>
        >>
        >> </div>
        >> </body>
        >> </html>
        >>
        > The gutter is built into the design.
        > The style rule that sets this for a t-4 is:
        >
        > .yui-t4 #yui-main .yui-b { margin-right: 14.8456em;
        > *margin-right 14.55em; }
        >
        > changing this to 13.8456em for firefox et al and 13.57 for IE should
        > work, i.e. :
        >
        > .yui-t4 #yui-main .yui-b { margin-right: 13.8456em;
        > *margin-right 13.57em; }
        >
        > Make sure you test across all browsers and don't expect pixel perfect
        > results across all browsers.
        >
      • alexknowles090
        ... Hi Wally, your suggestion worked great. Thanks for your help!
        Message 3 of 4 , Jul 1, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "wally.ritchie"
          <wally.ritchie@...> wrote:

          > The gutter is built into the design.
          > The style rule that sets this for a t-4 is:
          >
          > .yui-t4 #yui-main .yui-b { margin-right: 14.8456em;
          > *margin-right 14.55em; }
          >
          > changing this to 13.8456em for firefox et al and 13.57 for IE should
          > work, i.e. :
          >
          > .yui-t4 #yui-main .yui-b { margin-right: 13.8456em;
          > *margin-right 13.57em; }
          >
          > Make sure you test across all browsers and don't expect pixel perfect
          > results across all browsers.

          Hi Wally, your suggestion worked great. Thanks for your help!
        Your message has been successfully submitted and would be delivered to recipients shortly.