A grid like this is possible?

[Tri@de]

I want to make a grid like this one in the attachment.

Can someone help me?

[Lynne]

More information is needed. What is the width of the columns?

[Tri@de]

this is the flaten grid i use now

<div id="doc3" class="yui-tvb-l1">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>


and is

column1 column2 column3

sidebar (left) 160px, 2 columns (66,33)

[Lynne]

Just add an <hd> in there:

<div id="doc3" class="yui-tvb-l1">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div id=”hd”>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
<div class="yui-gc">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>

[Tri@de]

It doesn't work. Have you tried it?

i see it in his way:

[Lynne]

Yes, I tried it. You need to put that in the top and bottom portion.

Have you ever edited any of that CSS or is it all still default?

https://vborg.vbsupport.ru/attachment.php?attachmentid=138030&stc=1&d=1335565612

[Tri@de]

Oh sorry, my fault. after i did the grid i converted it to unflatten :P

[Energypac]

I am trying to build a custom grid and it works on everything but IE. here's the code below, any ideas. I need a 100% 240px overtop of (25/75) widget -primary content with the 240px to be able to run top to bottom. See tmp dump for an example. https://tmpdmp.com/d2490f00fae4a360/d5b39b0d14cebc80 While we're asking, I could use another one that is basically the same as the one above except 100% primary content on second line with the 240px to be able to run top to bottom
Thanks
Marc---

<div id="doc3" class="yui-tvb-r3">
<div id="hd">
<div class="yui-u yui-header">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
<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_column4">$column[4]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column6">$column[6]</ul>
</div>
</div>
<div class="yui-g">
<div class="yui-g first">
<div class="yui-g first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column7">$column[7]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column8">$column[8]</ul>
</div>
</div>
<div class="yui-g">
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column9">$column[9]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column10">$column[10]</ul>
</div>
</div>
</div>
<ul class="list_no_decoration widget_list" id="widgetlist_column11">$column[11]</ul>
</div>
</div>

[Lynne]

Just taking a quick look at it, you have two divs with id "yui-main" That's a big no-no. You may only use an id once on a page.

[Energypac]

I am trying to build a custom grid and it works on everything but IE. here's the code below, any ideas. I need a 100% 240px overtop of (25/75) widget -primary content with the 240px to be able to run top to bottom. See tmp dump for an example. https://tmpdmp.com/d2490f00fae4a360/d5b39b0d14cebc80 While we're asking, I could use another one that is basically the same as the one above except 100% primary content on second line with the 240px to be able to run top to bottom
Thanks
Marc---

<div id="doc3" class="yui-tvb-r3">
<div id="hd">
<div class="yui-u yui-header">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
<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_column4">$column[4]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column6">$column[6]</ul>
</div>
</div>
<div class="yui-g">
<div class="yui-g first">
<div class="yui-g first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column7">$column[7]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column8">$column[8]</ul>
</div>
</div>
<div class="yui-g">
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column9">$column[9]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column10">$column[10]</ul>
</div>
</div>
</div>
<ul class="list_no_decoration widget_list" id="widgetlist_column11">$column[11]</ul>
</div>
</div>

[Lynne]

You didn't fix the issue I pointed out. Please fix that and then let us know if you still have problems with IE and let us know the fixed code.

(You really should have started your own thread about this.)

[Energypac]

Lynne,
Thanks Lynne for your input. I did start a thread but I haven't had any takers:) I need a substitute for "yui-main" . With it, it works on 3 out of 4 browsers. Without both, it doesn't work at all. What can I substitute for the top "yui-main" that will put a placeholder for the top marquee (not header), its a js slider 310 x 530? The problem in IE is that its stacking it in a single column. Thanks for your help!!!
Marc---

[Lynne]

Since you are only supposed to have one yui-main, why not try it as the main div around all the content and not have two of them?

[Energypac]

Lynne, Tried that but doesn't work. Any other ideas?
Thanks
Marc---

[Lynne]

Post what you tried so we can see what went wrong. Please put it in code tags.

[Energypac]

All that I did was remove the 2nd <div id="yui-main"> And it lost my marquee spotand jammed everything together.

<div id="doc3" class="yui-tvb-r3">
<div id="hd">
<div class="yui-u yui-header">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
</div>
<div id="bd">
<div class="yui-b">
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
<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_column4">$column[4]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column6">$column[6]</ul>
</div>
</div>
<div class="yui-g">
<div class="yui-g first">
<div class="yui-g first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column7">$column[7]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column8">$column[8]</ul>
</div>
</div>
<div class="yui-g">
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column9">$column[9]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column10">$column[10]</ul>
</div>
</div>
</div>
<ul class="list_no_decoration widget_list" id="widgetlist_column11">$column[11]</ul>
</div>
</div>

--------------- Added 1338490619 at 1338490619 ---------------

Here is a couple of screenshots, the first is using the grid in Firefox and pasted the actual layout grid from admincp/ Layout . The 2nd is what it looks like in IE.

https://tmpdmp.com/13bf4be0802cdd5d/45f603998a898fce

https://tmpdmp.com/685d027c04f685de/f81fa24f2c909f81

--------------- Added 1338493729 at 1338493729 ---------------

[Lynne]

You can't just remove the <div> without removing the </div> that goes with it. You now have an extra </div> in there.

Have you tried putting it through an html validator (after correcting the issue with the extra </div>) - http://validator.w3.org/

(And can you please use the code tags when posting code - it's too hard to read as you have it.)