25-50-25 Layout using YUI Grids CSS

Developers using the YUI Grids CSS system may notice that the common 25%/50%/25% layout is not documented nor supported by the YUI Grids builder tool. Following is a solution using nested grids that achieves this layout (nearly, but not pixel-perfect).

<div class="yui-ge">
	<div class="yui-u first">
		<div class="yui-gd">
			<!-- START: West Layout Panel -->
			<div class="yui-u first">
				<p>WEST</p>
			</div>
			<!-- END: West Layout Panel -->
			<!-- START: Center Layout Panel -->
			<div class="yui-u">
				<p>CENTER</p>
			</div>
			<!-- END: Center Layout Panel -->
		</div>
	</div>
	<!-- START: East Layout Panel -->
	<div class="yui-u">
		<p>EAST</p>
	</div>
	<!-- END: East Layout Panel -->
</div>

This code has been tested within a custom doc size (980px) in Firefox 2 and on IE 6. With a page constrained at 980 pixels in width, we end up with:

233px WEST | 22px gutter | 472px CENTER | 18px gutter | 235px EAST

Not pixel-perfect, but close...and still adhering to YUI standard markup with no additional CSS required.