Have Geek Brain

Creation of three columns, with fixed sidebars using ui-grids

I am trying to do this without much success.

How can I use yui grids to create a template like yui-t1 (the one with a 160px sidebar on the left), but with a sidebar to the right of the same width?

The center column must be liquid ...

+1


a source to share


5 answers


Could you try liquid layout instead ?



+1


a source


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

<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 as 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;
}
+1


a source


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

0


a source


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

but then adding an extra class to the second yui-u named .main

or class .last

on the 3rd yui-u.

You can add below rewrite style

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

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

to get 3 decks with 19/59/19 width

What are you using for you?

0


a source


You chose Matthew's answer, but he didn't answer your question. While it may have solved your problem, someone reading this question in the future may still know the answer. It seems to me that something like this discourages someone from giving or elaborating an answer and will cause someone else to repeat the question.

0


a source






More articles:


All Articles