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

YUI grids - space between main & side columns

Expand Messages
  • alexknowles090
    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
    Message 1 of 4 , Jun 30, 2008
    • 0 Attachment
      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>
    • 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 2 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 3 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 4 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.