@import url('../../Default/global/Global.css'); /* ############################################################################ ## ## ThreeCols1 ## ############################################################################ | Header | |______________________________________| | | TrailNav PageFunctions | | |___________________________| | | | | | Tertiary | Primary | Secondary | | | | | | | | | | | | | | |_______________|___________| | | PageFunctions | |__________|___________________________| | | | Footer | */ /* #################################### Custom Design Options ADD RULES HERE. - Note that certain rules are overridden by the fixed design elements below. - DO NOT use padding, margins, borders on #Primary, #Secondary, #Tertiary, in this section. See notes in the next section if it's absolutely necessary to use these options on outer containers. ################################# */ #Page { padding-bottom: 2em; } #PageInner { } #Page #PageContent { } #Page #PageContentInner { } #Page #PageContent #Primary { } #Page #PageContent #PrimaryInner { } #Page #PageContent #Primary #PageBody { } #Page #PageContent #Primary #SubContainers { } #Page #PageContent #Primary #SubArticles { } #Page #PageContent #Secondary { } #Page #PageContent #SecondaryInner { margin-left: 16px; padding: 16px 0 16px 16px; border-left: #c8c8c8 1px solid; } #Content #PageHeader { margin-left: -210px; } /* #################################### Column Widths DON'T ADD RULES HERE. ONLY MODIFY VALUES. Avoid use of padding, margins, borders on #Primary, #Secondary, #Tertiary, as this will affect the column widths. Generally it's easier to put these settings on the "Inner" elements (in which case, specify them in the section above). However some designs require settings on the outer elements. If padding, margins, borders are necessary on the outer containers, make sure that widths are re-calculated properly. You should ONLY need to modify the "width: #px;" attributes in these cases. (Borders are usually set in pixel sizes and by nature, "%" or "em" widths are not compatible with the approach used in these stylesheets.) Other settings (e.g. padding, margin) should be equal to the full width of the column. ################################# */ /* Left column width */ #ContentInner { padding-left: 220px; } #Tertiary { width: 220px; /* LC width minus #Tertiary padding/margin/border. */ left: -220px; } /* Right column width */ #Page #PageContent #PrimaryInner { padding-right: 274px; /* Note that the right column overlaps this padding when the content fills the screen (by using a negative margin). */ } #Page #PageContent #Secondary { width: 274px; /* RC width minus #Secondary padding/margin/border. */ margin-left: -274px; } /* Full page width (only for fixed width designs) */ * html #Tertiary { /* IE6 Only */ margin-left: -980px; /* Affected by #Template{width}. Exact pixel width of #Template (instead of 100%). Wow! Fixes the intermittent jumping #Tertiary div problem in IE6. Does IE6 have maths bugs with percentage width margins? Probably! Has to use star hack because other browsers don't like the fixed pixels. Could this be fixed with a different approach on a div further up the hierarchy? No solution for a fluid width design yet, the div still jumps approximately 1 in 20 loads, or worse in some designs. */ } /* Only change these where the design is fixed width AND margin/padding/borders are required on these elements. Avoid changes if possible. Widths other than 100% remove the ability for the page to easily change to fluid width. */ #Content { width: 100%; /* Specifying a width ensures consistent page layout in IE7, IE6, FF, otherwise they all treat the page width slightly differently. */ } #Page { width: 100%; /* Specifying a width fixes float and width issues in FF and IE6 when content does not push to 100% width. */ } #Page #PageContent { width: 100%; /* Specifying a width ensures consistent layout on all pages regardless of content. */ } #Page #PageContentInner { width: 100%; /* Specifying a width ensures consistent layout on all pages regardless of content. */ } #Page #PageContent #Primary { width: 100%; /* Specifying a width ensures consistent layout on all pages regardless of content. */ } /* #################################### Fixed 3 Column Design Elements DON'T CHANGE. ################################# */ #Content { position: relative; float: left; } #ContentInner { position: relative; float: none; /* Fixes #Tertiary creeping problem in IE7 by not ideal because it compromises a design goal. */ min-width: 1px; /* Without a min-width, #Tertiary jumps to the left off the screen in IE7. */ } * html #ContentInner { /* IE6 Only */ float: left; /* Fixes invisibility problems in IE6, assuming #Content also has a float. But we most use other means to stop #Tertiary creeping, see #Page below. */ } #Page { position: relative; float: left; } * html #Page { /* IE6 Only */ overflow: hidden; /* Fixes creeping #Tertiary problem in IE6 when content is at minimum width at the cost of removing the left/right scrollbar so right column content may become invisible on very thin screens. */ } #Page #PageContent { position: relative; float: left; } #Page #PageContentInner { position: relative; float: left; } #Page #PageContent #Primary { position: relative; float: left; } #Page #PageContent #Secondary { position: relative; float: right; /* Left or right float shouldn't matter if widths are properly set, but we use right for a nicer standard layout if they're not. */ } #Tertiary { position: relative; float: left; margin-left: -100%; /* The holy grail trick. And the cause of most of our headaches. */ } * html #Tertiary { /* IE6 Only */ left: 0; /* The holy grail hack/fix. */ } /* Visual testing aids... ------------------- #Page { background: #ffffcc; border: #cc0000 1px solid; } #PageContent { background: #ccffcc url('../../Default/images/blue_gradient.gif') bottom repeat-x; border: #00cc00 1px solid; } #PageContentInner { border: #0000cc 1px solid; } #Page #Primary { background: #f0f0f0; } #Page #Secondary { background: #ffd0d0; } #Page #PrimaryInner { background: #e0e0e0; } Methdology Notes ------------------- Last Updated: 2009-07-17 The complex embedded div layout for this system seems like overkill at first. - Based on the holy grail concept with substantial DDSN modifications - http://www.alistapart.com/articles/holygrail/ - The div structure and content order is semantically proper (in fact better than holy grail) considering the way content is represented in the cm3 white site design. - Inner divs, while a bit ugly, allow us to cheaply create common effects like curved corners, and also make padding/margins/borders easier without the need to dynamically re-calculate widths. A good commercial outcome for a minimal technical compromise. - Design goal: Accommodate as many designs as possible (both fluid and fixed width) with no change to the top level element structure. - Design goal: We're looking for a single solution that can be used for one, two, AND three column designs with no alteration to the top level divs. - Design goal: All containers must have position/float so that they have proper dimensions and therefore backgrounds and borders can be used in all browsers in all parts of the layout. - Design goal: We want a "inner" header that could span the two "page content" columns for things like trail nav, page functions, page title. This is not found in other three column templates. - Design goal: The most common CMS page design should be set up by default. In particular: - Top page functions in the top right of the page without causing float/position issues - Are there other points to list here? (For review...) - Design goal: Identical layout and window resizing behaviour in all browsers. - Design goal: IE6+ support, Safari, Opera, FF2, FF3 in one style sheet. IE5.5 dropped. - Design goal: Resizing behaviour includes full left/right scrollbar without columns overlapping on thinner screens. (Without this requirement the overall solution is much simpler.) - This solution removes (at least it seems to remove) many of the problems encountered in earlier white site CSS platforms including: - IE6 content invisibility - FF2 and FF3 inconsistency - Lots of browser-specific code (only 2 "* html" hacks now) - Float/width problems with content that's less than full screen size - No absolute positioning hacks - No nasty hacks required to place #PageFunctionsTop and make it work nicely with #TrailNav and page content. Test Platform ------------------- - Tested against design goals in white site form: In these browsers: - XP IE6 - Vista IE7 - Win2000 FF2 - Vista FF3 - Vista Safari 3.1.2 - Vista Opera 9.52 - No Mac as yet :( With this content: - Centre column content with dynamic width that always pushes to 100% screen size (wide content) - Centre column content with dynamic width that doesn't push to 100% screen size (thin content) - Centre column content with fixed width element that pushes the page wider than 100% screen size Note that IE5.5. almost works but there are problems with other parts of the CSS. At estimated 0.03% market exposure (June 2009) we don't support this browser. Could use a custom style sheet if needed. Differences in test results on some browsers are listed below. - The following things are NOT yet tested: - A wide range of graphic designs yet. Success of the design goals is theoretical but based on experience. - Moving TrailNav and PageFunctions elements to a different part of the master page. This might be necessary depending on the site design. - Including a FeatureContent element or microsite header. (Update 20090717 - A standard feature is now included in the white site. It's working okay.) - Including other elements not in the core design. (Other elements should not be needed for most designs. This structure already offers more flexibility than most standard 3 column design platforms.) Known Issues ------------------- Last Updated: 2008-08-27 - Compared to previous platforms, the naming of #Primary, #Secondary, #Tertiary is not as clear. The relationship between these elements is less relevant to previous designs, where these elements were very clearly three columns at the same level in the element hierarchy. - Columns are not equal height by default. This isn't possible/relevant in our case anyway due to the need to have an "inner" page header (e.g. for the #TrailNav and #PageFunctions elements). This was deemed acceptable since most designs don't require equal height columns or the visual effect of background colors can be achieved with images. If needed, the Javascript SetUniformHeight function can be used and most designs will still look okay even if Javascript is disabled. - This approach assumes that the left and right columns are fixed width. It should be possible to create modified versions of the style sheet that include dynamic widths, but this is quite likely to cause side effect issues in different browsers (depending on the complexity of the design). - About #PageContent and #PageContentInner - Note: Could remove position and float on #PageContent for full width page (right column to far right) in all browsers without any need for an inner div. But this causes FF, Safari, Opera not to fill the screen. On the other hand removing the float means problems placing backgrounds/borders on this element. See next note on #PageContentInner. This solution maintains left/right scrolling behaviour on smaller screens. - Note: Could remove position and float and add right padding on #PageContentInner for full width page (right column to far right) in all browsers with full flexibility on #Primary and #Secondary. However removing the float means problems placing backgrounds/borders on this element. This solution maintains left/right scrolling behaviour on smaller screens. - (One of the design goals was to have position/float on all inner and outer containers.) - The width:100% setting on both these elements could cause issues adding margin/padding/borders (in particular, problems with borders could cause design limitations) but this was considered an acceptable compromise. It's needed to make sure all browsers behave the same, i.e. that the content area fills the screen even when the content is thin. - #ContentInner has no float. Bah! This was overlooked until near the end of testing. Adding position/float causes width issues due to the left padding. Perhaps it could be overcome using a similar method to what's been used for the internal page content approach. This would also remove the need for at least one IE6 hack. On the other hand, it is actually a different problem because the relationship between #Tertiary and #PageContent is different to #Primary and #Secondary. This problem is left for later... Perhaps it's acceptable for now since most designs won't require fine control over borders and backgrounds on this particular element. - Update 20090717 - Add float: left; to ContentInner and the width problems (whatever they were? keep better notes!) can't be seen. Perhaps other updates have fixed this. However float: left; re-introduces the sideways #Tertiary creep in IE7 when #PageBody content is at minimum width. We'll keep float: none; in the standard structure at the cost of a design goal. Note that we considered going the other way but very thin content screens are becoming more important (e.g. for mobile access). - Update 20090717 - Note that the note in previous white sites on this element about min-width: 1px; fixing the #Tertiary creep in IE7 appears to be incorrect. But it is needed to keep #Tertiary properly anchored anyway. - #ContentInner settings contribute to sideways #Tertiary creep in IE7. The following code changed 20090717: REMOVED: min-width: 1px; // Fixes sideways creep problem in IE7. // 20090717 Except it doesn't! float: none; fixes it but compromises a design goal, see above. - Browser issues: All browsers: - Once the centre column content reaches its minimum size (e.g. as large as a fixed width content element like an image, pre text, or table), dynamic width parts of the template (e.g. header and footer) will continue to shrink but the content area does not. This would be more commonly considered to be an advantage to a disadvantage but isn't necessarily what a normal user would expect. Use min-width settings strategically to control this behaviour in most browsers. IE6: - Creeping #Tertiary problem on 3 column template fixed with overflow:hidden on #Page, however this causes either no sideways scrollbar to appear (on the current version) or the centre column to disappear (on the older fixed version, it's overlapped by the right column) on thinner screens. Attempts to fix the position of #Tertiary (even with absolute position) failed. Is there a better solution? IE6 & IE7: - Once the centre column content reaches the minimum width of static elements (e.g. pre text, fixed width table, image), the dynamic portions of the content (e.g. text) continue to shrink in width as the screen is made smaller. However the container element doesn't continue to re-size. This will do for now. IE7: - If #PageContent content is *really* thin then #Tertiary might jump to the bottom of the screen and off to the left. Opera and Safari: - Right column (secondary) content jumps under centre column on thin screens once the centre column reaches its minimum width in Opera and Safari (not FF or IE). This is considered an acceptable compromise for now. */