From finding different bits of information i managed to make a grid that you can see in action at
www.eteknix.com
My code is:
Layout Manager UI HTML
Code:
<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 yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</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>
</div>
</div>
<div class="yui-b yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>
Default Template HTML
Code:
<style type="text/css">
.yui-u {width: 18%;}
.yui-tvb-l50 {width: 60%;}
</style><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 yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</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>
</div>
</div>
<div class="yui-b yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>
My site is using a 78% width and as you can see from my site (linked above) the side columns are a different width, so i need the first column reduced a bit and the last column expanded a bit.
Before i had the new layout (2 colums within the width of 1) which looks like this:
I was using this code:
Code:
<style type="text/css">
.yui-tvb-l25 {width: 18%;}
.yui-tvb-l50 {width: 60%;}
</style>
Any ideas on getting this to look right?
I will quite happily upload this grid once it's sorted for other people to use
Thanks,
Andy