Search code examples
cssyuiyui-grids

yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

I have been trying to get yui-css grid system to make a three column grid, where the first on (left) uses 1/4 of the space, the second (middle) uses 2/4 of the space and the third (right) uses 1/4 of the space.

Something like this:

|            header             |
-------- ------------------------    
| left  |     middle    | right |
--------------------------------
|            footer             |

Any input will be much appreciated.

UPDATE: Judging from the answers/comments, I realize some more info is needed.

  • The site has a fixed with (750px - #doc in YUI).
  • I am not really interested in none YUI solutions (thanks anyway), since I would love to start using YUI-CSS as a base framework, so this project I am doing is a test to see if it meets my needs. I like the fact that it works the same way across different browsers.
Solution

  • using yui solution is quite tricky :) but below is ur solution to 1/4, 2/4, 1/4 column layout

    <body>
  <div id="doc4" class="yui-t5">
    <div id="hd">
    </div> <!-- header -->
    <div id="bd">
      <div id="yui-main">
        <div class="yui-b">
          <div class="yui-gd">
            <div class="yui-u first">
              Left Column
            </div> <!-- yui-u first -->
            <div class="yui-u">
              Middle Column
            </div> <!-- yui-u -->
          </div> <!-- yui-gd -->
        </div> <!-- yui-b -->
      </div> <!-- yui-main -->
      <div class="yui-b">
        Right Column
      </div> <!-- yui-b -->
    </div> <!-- body -->
  </div> <!-- doc4 -->
</body>