I’ve been fiddling around with the YUI Grids CSS system available from the Yahoo! Interface Library. It’s pretty neat – a lightweight system to layout web pages in grids. It’s quite flexible, but it doesn’t cover putting a horizontal navigation area at the top of the viewed page, but after the content in the source (taking it out of the document flow, so to speak).

So I worked out a simple layout that adds an absolutely positioned div to the YUI layout. It’s meant to be a guide or starting point for others looking to solve a similar issue. I’ve used the 750px width, for example; but it should be obvious how to adjust my code to accommodate the other widths used by the YUI system.

You can see the layout here and download my files here. Enjoy!