1

I,ve been trying to do this without much success.

How can I, using yui-grids make a template like yui-t1 (the one with a sidebar of 160px in the left), but with also a sidebar to the right of the same width?

The center column should be liquid...

Cesar
  • 4,076
  • 8
  • 44
  • 68

5 Answers5

1

You can adapt and extend this example. Here's the HTML for 200px fixed / fluid content / layout preset column:

<div id="bd">
    <div id="yui-main">
        <div class="yui-b yui-b1">
            <div class="yui-u-main">
                <div class="yui-u">
                    <p>Main column: fluid width</p>
                </div>
            </div>
            <div class="yui-u">
                <p>Left column: 200px fixed</b>
            </div>
        </div>
    </div>
    <div class="yui-b">
        <p>Third column: fixed width, follows template preset.</p>
    </div>
</div>

CSS is simple as:

.yui-b1 .yui-u-main {
    float: left;
    width: 100%;
}
.yui-b1 .yui-u {
    float: left;
    /* Width of left column */
    width: 200px;
    margin-left: -100%;
}
.yui-b1 .yui-u-main .yui-u {
    float: none;
    width: auto;
    /* Width of left column + 13px margin (default YUI margin) */
    margin-left: 213px;
}
moraes
  • 13,213
  • 7
  • 45
  • 59
  • I too am looking for a solution using YUI CSS; I tried the above as described and it did not work. I tried the above using doc3 and yui-t4 (fixed right column). This looks like a good approach, however, the left column did not come out as expected; this produced a 2 column layout, not three. –  Dec 31 '09 at 18:04
1

You could try this liquid layout instead?

Matthew James Taylor
  • 4,806
  • 5
  • 29
  • 33
  • This appears to be the 'real' holygrail, I'm testing it, and it appears to work even in IE8 Very thanks my friend – Cesar May 27 '09 at 00:41
0

You chose Matthew's answer but he didn't answer your question. Though he may have solved your problem, someone reading this question in the future may still want to know the answer. This sort of thing, seems to me,discourages some from giving or developing an answer & would compel someone else to repeat this question.

aaron b11
  • 128
  • 1
  • 7
0

According to this page, a 180px-wide right sidebar has the default class yui-t4. I assume you could go into the CSS and change this pixel value to 160.

Evan Meagher
  • 4,517
  • 21
  • 18
  • I could do that, but the thing is I need both sidebar and yui-t4 only make the right sidebar – Cesar May 25 '09 at 19:31
  • You can't use both of them at the same time? What happens if you create two divs, one with class yui-t1 and the other with yui-t4? I'm unfamiliar with YUI. – Evan Meagher May 25 '09 at 21:08
0

Have you tried using the YUI grids layout http://developer.yahoo.com/yui/examples/grids/grids-gb_source.html

but then adding an extra class on to the 2nd yui-u called .main or a class of .last on to the 3rd yui-u.

You could add the below overwriting style of

.yui-gb .yui-u {
width: 19%;
}

.yui-gb .main {
  width: 59%;
}

to get 3 cols with widths 19/59/19

That any use to you?

Jason Plank
  • 2,336
  • 5
  • 31
  • 40
Pricey
  • 5,799
  • 12
  • 60
  • 84