[sneezyyzeens]

I finally had some time to figure this out, and thought I'd share in case there is someone as lost with this stuff as I am.

I figured out what "flatten the grid" meant.

Add a new grid, name it whatever you want, and pick whichever of the options is closest to what you are actually wanting. When your new grid is listed, the default action is "edit" which only gives you the options that are available when you create a grid. Instead, change the dropdown to "flatten grid"

You will then be presented with a YUI CSS template. I'm sure vBulletin gives you the information about this somewhere, but after some google searching, I found that YUI is a Yahoo standardized library which includes these template codes. The YUI information can be found at http://developer.yahoo.com/yui/

In particular, I found a basic YUI grid builder here: http://developer.yahoo.com/yui/grids/builder/ and, possibly more importantly, a cheat sheet that lets you know what things like "class=yui-b", "class="yui-t5", etc mean: http://yuiblog.com/assets/pdf/cheatsheets/css.pdf

My original post just asked about the "main" part of my layout. I actually wanted a nav section to the left (25%), main (75%) and a 240pix sidebar to the right. Inside the main part I wanted the option of 2 widget above the primary content:



Each of those blocks can be stuffed with whatever widgets you want to throw in there. It's a 100% width, 2 column(25/75) layout with 240 px sidebar, with a nested grid of one row of 2 blocks with a lower 1 column row that will have my articles.

Here's the grid code I used to achieve that layout.

<div id="doc3" class="yui-t5">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-g">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>