I have started using the Yahoo! User Interface(YUI) library CSS on my sites. I have found that some combinations do not alway render the way I"d like on IE and Firefox. So I have created this page to test some combinations, and to use as a reference when building new pages. Here is the description of the YUI library from Yahoo!:
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.
Now on to the samples
Four Colums by using nested yui-g
<div style="background-color: orange;" class="yui-g">
<div style="background-color: black;" class="yui-g first">
<div style="background-color: red;" class="yui-u first">ONE</div>
<div style="background-color: yellow;" class="yui-u">TWO</div>
</div>
<div style="background-color: black;" class="yui-g">
<div style="background-color: green;" class="yui-u first">THREE</div>
<div style="background-color: blue;" class="yui-u">FOUR</div>
</div>
</div>
Three Colums by using yui-gd (1/3-2/3) and yui-g(1/2 - 1/2)
<div style="background-color: green;" class="yui-gd">
<div style="background-color: purple;" class="yui-u first">ONE</div>
<div style="background-color: orange;" class="yui-g">
<div style="background-color: yellow;" class="yui-u first">TWO</div>
<div style="background-color: purple;" class="yui-u">THREE</div>
</div>
</div>
Three Equal Columns Using YUI-GB
<div style="background-color: orange;" class="yui-gb">
<div style="background-color: red;" class="yui-u first">ONE</div>
<div style="background-color: yellow;" class="yui-u first">TWO</div>
<div style="background-color: green;" class="yui-u">THREE</div>
</div>
Three Columns 2 Rail one Main Using GF and nested G
<div class="yui-gf" style="background-color: orange;">
<div class="yui-u first" style="background-color: red;">ONE</div>
<div class="yui-u" style="background-color: yellow;">
<div class="yui-g" style="background-color: orange;">
<div class="yui-u first" style="background-color: yellow;">TWO</div>
<div class="yui-u" style="background-color: purple;">THREE</div>
</div>
</div>
</div>
ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE ONE
TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO TWO
THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE THREE
