Making three columns layout, with fixed with sidebars using yui-grids

Question

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

Answer 1

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.

Answer 2

You could try this liquid layout instead?

Answer 3

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?

Answer 4

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.

Answer 5

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;
}

Answer 6

This is in reference to the YUI CSS extensions described by Moreas

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.