Take the pain out of CSS-based layouts

I hate dealing with CSS-based layouts. Don’t get me wrong, I’m not saying I’d rather use tables. It’s just that I don’t relish the idea of fussing with the hacks, negative margins, floats, and more to get the page looking good in all browsers.

This problem was solved a few years ago by a series of layouts donated to the greater good by wonderful developers. This gave me the ability to ignore layouts and concentrate on semantic, structural markup and using CSS to turn this into a great set of modules on the page. This is the stuff that makes web development fun for me.

Over the years, new layouts came and went and cross-browser layouts developed to a science. It’s now even easier for you to build a web site layout that is predictable, flexible, and lightweight.

The YUI-Grid

Just because I work at Yahoo!, doesn’t mean I immediately jumped onto the YUI-Grid when it was released. I’ve built several sites without it since its launch. A developer becomes comfortable with a solution and change hurts. However, I recently began working on a very simple, small gallery site and gave this tool a try.

First, a bit of an explanation on some of the nomenclature. The YUI has laid down the law on some naming conventions, and while it may seem a bit bloated, the resulting hooks allow a site to easily incorporate the YUI JavaScript and CSS.

Each main container div has three children, class=”hd” for the header, class=”bd” for the body, and class=”ft” for the footer. You can delete the hd or ft if they are not needed, but you need to at least have the body element. The main portions of the page use the same naming conventions, although with id instead of class. The header has id=”hd”, the body container: id=”bd”, and finally the footer has id=”ft”.

YUI flexibility

Nate Koechley, the man behind the grids, has created a series of rules that let you change the width of your grid, the number of columns, position of columns, and how nested columns divide the avialable space by simply changing a few classes on the parent containers.

It’s a very powerful set of controls. Here’s an example of how the classes change the widths of nested divs.

YUI Grid demonstration
The standard grid-unit interplay always divides space in two, evenly. To create layouts of more than two units (e.g., three), and to create layouts divided unevenly (e.g., 66% and 33% or 75% and 25%), we employ special grid holders. While “yui-g” tells the two children each take up half the space each, “yui-gc” tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space. Everything else remains the same: units live within grids, and the first of a set must be indicated.
Nate Koechley – Yahoo! UI Library: Grids CSS

Help?

Now, if you are like me, your head has begun throbbing after reading the YUI Grid CSS page several times, making notes on how it works, and reading it a few more times before figuring out how to start. The package is complex and yet easy to work with once you dive in.

However, it’s easy to skip most of the headaches and begin building your site immediately. Dav Glass, also of the YUI team, created a great Grid Builder that makes it sinfully easy to build your complicated layout. Not only does it generate the HTML for your basic page, it also incorporates the full YUI CSS library.

This means you also get the YUI Base CSS, YUI Reset CSS, as well as the excellent YUI Fonts CSS. All of these are combined into one CSS file that has been akamized for faster downloads. This means your final site CSS can focus solely on the things that make it unique. You’ll be surprised how small your custom files will be when all of these issues have already been dealt with.

Take it one step further

I was prompted to write this post after seeing the latest extension of the Grid CSS from the outside. Christian Heilmann just published a simple javascript, Enhancing YUI grids with equal height columns, that builds on the established nomenclature of the Grid CSS. It’s a demonstration of the power afforded by a standardized class and id naming convention.

Christian’s javascript also utilizes the basic YUI Javascript library to take all of your nested divs and make them the same height. So, with the addition of one more js script, you now have complete control of your grid layout and your nested divs are all the same height.

Here’s how Christian describes the simplicity.

All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.
Christian Heilmann – Enhancing YUI grids with equal height columns

Future flexibility

This powerful package of YUI CSS and standardized nomenclature for establishing the building blocks and the YUI JavaScript library for building interactions will allow developers to spend more time creating the elements that make their site unique and reduce the cross-browser issues caused by individual mistakes. We’ll see more extensions from within and outside the YUI developers as the usage becomes more universal. They YUI libraries are not doing the work for me, they’re just making it a lot more fun and productive.

Quick hint for using the YUI Container library

The YUI Container libraries work with visibility:hidden to hide your targeted div. I’ve spent too many hours trying to figure out why something wasn’t working only to realize I had display:none in the CSS. So, when you use these libraries remember visibility, not display. It’s a mantra that could keep you from pounding your forehead into a keyboard repeatedly.

And don’t forget to keep your libraries updated!

Forcing the footer to always be at the bottom of a page

Cameron Adams (The Man in Blue) has created a method to force a footer to stick to the bottom of a page, regardless of how much content it contains. His approach is based on the work by Craig Erskine (solarDreamStudios).

The Setup

You have a page that terminates in a sturdy footer, such as this site. You’d like the footer to be cemented to the bottom of the browser window regardless of the amount of content. How do you position the footer at the bottom on a small page, yet not cause a conflict with long page? It’s actually more irksome than you would imagine.

The Solution

The footer is placed outside the content wrapping div. The html, body, and content div are given height:100%, which pushes the footer off screen. The footer then uses negative margins to sneak back up into the page. For pages with longer content, space is needed in the content div to avoid overlapping on the bottom.

Based off the original footerStick, footerStickAlt sets up the Web page so that it will span the entire height of the browser window, even if the content is less than the height of the browser window. However, where footerStick then used absolute “bottom” positioning to get the footer to appear at the bottom of the screen/content, footerStickAlt positions the footer outside the height of the content, and then applies a negative margin to get it to display inside the browser window.

So, where footerStick’s code requires you to place the footer inside a containing element, footerStickAlt requires you to place it outside the element:





You then need to apply a bit of CSS:


html { height: 100%;}
body { height: 100%;}
#nonFooter { position: relative; min-height: 100%;}
* html #nonFooter { height: 100%;}
#Footer { position: relative; margin-top: -7.5em; }

…For the case where the Web page content is larger than the browser window, the footer will be positioned naturally below the content, then brought up by the margin. For this scenario you should provide a bit of space at the bottom of your content which the footer can rise into without covering anything. This can be done with a bit of padding or margin on your content.

The only drawback to footerStickAlt is that you must know the exact height of your footer (whether it be in absolute or relative pixels). However, you have to know this roughly with the original version anyway, in order to make room for the footer at the bottom of the content. It’s generally a non-issue with footers anyway, as they have limited information and a sparse layout.

Cameron Adams – footerStickAlt