In the process of developing my app I realised that my layout needed a slight overhaul. My goal is to increase the width of my main content area and to dispense with the right-hand nav bar in favour of tabs above the main content area (to be implemented using jQuery UI). I’ve created a template UI using YUI Grids with LayoutManager and I’d like to define a custom width for my content pane and give the main content area a white background and yellow border. I believe that I’ve faithfully followed the directions given with the YUI Grids + LayoutManager example, but I am unable to get the border-right to render in either FF3 or IE7. I’ve stripped the page right back to first principles, hoping to resolve the error with a simplified page, but have only succeeded in reproducing the error. Here she is:
!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”
html
head
title YUI Base Page /title
link rel=”stylesheet” type=”text/css” href=”http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css
&2.6.0/build/layout/assets/skins/sam/layout.css”
style type=”text/css”
body {margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: small; color: #33333; background-color: #6699cc;}
#custom-doc {margin: auto; text-align: left; width: 88.46em;}
#hd, .yui-layout-unit-top {background-color: #6699cc;}
.myHd {background-color: #6699cc; margin-left: 1.92em;}
#bd, .yui-layout-unit-center {background-color: #ffffff;}
.yui-layout-unit-center {border: 3px solid yellow;}
/style
/head
body
div id=”custom-doc” class=”yui-layout”
div class=”yui-layout-doc”
div class=”yui-layout-unit yui-layout-unit-top yui-layout-noscroll”
div class=”yui-layout-wrap”
div class=”yui-layout-bd yui-layout-bd-nohd yui-layout-bd-noft”
div id=”hd” class=”myHd” /div
/div
/div
/div
//This the main content area
div class=”yui-layout-unit yui-layout-unit-center”
div class=”yui-layout-wrap”
div class=”yui-layout-bd yui-layout-bd-nohd yui-layout-bd-noft”
div id=”bd”
div id=”yui-main”
div class=”yui-b”
div class=”yui-gc”
div class=”yui-u first” Lorem ipsum dolor lacus feugiat./div
div class=”yui-u” Lorem ipsum dolor sit amet, acus feugiat./div
/div
/div
/div
/div
/div
/div
/div
div class=”yui-layout-unit yui-layout-unit-bottom yui-layout-noscroll”
div class=”yui-layout-wrap”
div class=”yui-layout-bd yui-layout-bd-nohd yui-layout-bd-noft”
div id=”ft” /div
/div
/div
/div
/div
/div
type=”text/javascript” src=”http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js
&2.6.0/build/element/element-beta-min.js
&2.6.0/build/selector/selector-beta-min.js
&2.6.0/build/layout/layout-min.js”
(function(){
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout(‘custom-doc’, {
height: Dom.getClientHeight(), //Height of the viewport
width: Dom.get(‘custom-doc’).offsetWidth, //Width of the outer element
minHeight: 150, //So it doesn’t get too small
units: [
{ position: ‘top’, height: 70, body: ‘hd’ },
{ position: ‘bottom’, height: 25, body: ‘ft’ },
{ position: ‘center’, body: ‘bd’, grids: true }
]
});
layout.on(‘beforeResize’, function() {
Dom.setStyle(‘custom-doc’, ‘height’, Dom.getClientHeight() + ‘px’);
});
layout.render();
//Handle the resizing of the window
Event.on(window, ‘resize’, layout.resize, layout, true);
});
})();
/body
/html
I suppose I am missing some very fundamental point, but I’ve nearly exhausted the tricks up my sleeve to get this baby rendering as I’d expect and would be grateful for any insight from more expert UI developers. If and when, dear reader, I crack this nut I’ll be sure to post my solution.