three column borderlayout size problem [Archive]

subodh20022003

04-06-2007, 02:48 PM

Hi,

I am trying to create a three column page layout using BorderLayout. I have a header, footer, left, center and right element corresponding to north, south, west, center and east respectively. The problem is left and right elements always have a size of 250 px, no matter what size I set them to. Here is what my code looks like-

Javascript code-

var layout = new YAHOO.ext.BorderLayout(document.body, {
north: { split:false },
south: { split:false },
east: {
split:false,
initialSize: 300, /* doesn't take effect, size is always 250 */
collapsible: false
},
west: {
split:false,
initialSize: 300, /* doesn't take effect, size is always 250 */
collapsible: false
},
center: { autoScroll: true }
});

layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('header', { fitToFrame: true }));
layout.add('south', new YAHOO.ext.ContentPanel('footer', { fitToFrame: true }));
layout.add('east', new YAHOO.ext.ContentPanel('right', { fitToFrame: true }));
layout.add('west', new YAHOO.ext.ContentPanel('left', { fitToFrame: true }));
layout.add('center', new YAHOO.ext.ContentPanel('center', { fitToFrame: true }));
layout.endUpdate();

html-
<body>
<div id='header'> .. </div>
<div id='left'> .. </div>
<div id='center'> .. </div>
<div id='right'> .. </div>
<div id='footer'> .. </div>
</body>

Any idea what I am missing?

Thanks,
Subodh