960 Grid Tutorial – Understanding Push and Pull classes

Number two in a mini-series explaining a little bit about how the 960 Grid system works in osCommerce.

Push and Pull Classes

The Push class is used to “push” the DISPLAY of a div, and the Pull class is used to “pull” the DISPLAY of a div. Imagine an anchor at the left hand edge of your page, and then imagine yourself pushing content away from that anchor, or pulling content towards that anchor…

Take this standard code;

Which we know will produce a 2 column layout; 25% menu and 75% content area, like this;

That should be really easy to understand what is going on, right? Now, what if you want those columns to be the other way around? So, you end up with the menu on the left hand side and the content area on the right?

You could do this;

which would be just fine, and does exactly what we require;

But, the downside of this is that the menu is being rendered before the content, which is undesirable for Search Engine Optimisation (SEO), and undesirable for Accessibility (with regards to screen readers etc).

Instead, we can simply PUSH and PULL the display of our menu and content div’s to achieve the effect we need…and it is very simple…I’m reverting to the code back we started with and will instead add an extra PULL class to the menu div;

This has PULLed the menu div 18 blocks towards our “anchor” (the left hand edge of the page);

However, as you can see, it now displays on top of the content, which is undesirable. So what do we have to do?

The obvious answer is to PUSH the content div away from our anchor by 6 blocks;

so the display now shows;

which is exactly how we want it. And we have achieved this nicely in terms of SEO and of Accessibility. The content is being rendered in our underlying code BEFORE the menu, but the menu is displaying first in our output.

Hopefully this intro to PUSH and PULL classes will help you to design your osCommerce site with thought to SEO and to Accessibility.

Please remember that I am far from expert when it comes to 960 Grid, so if anything looks wrong, please let me know!