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

33652Re: [ydn-javascript] Re: YUI grids - space between main & side columns

Expand Messages
  • Nate Koechley
    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.
      >
    • Show all 4 messages in this topic