Grid Layout

[Blade-uk]

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

<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

<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:

<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