Number three in my short series explaining a little bit about how the 960 Grid system works in osCommerce…
Alpha and Omega Classes
The Alpha and Omega class is used to align the first and last “child” divs of a parent div to the outermost margins of the page…what is a child div? Have a look at this code;
Which produces this layout;
The next image shows the same code with a bit of explanation;
If I remove the alpha and omega class, the display reacts badly;
Why is this? It is because the “alpha” and “omega” classes “remove” the gutter left and right (not exactly but it’s the easiest way to explain it). In the image below I have shown this in red to illustrate the area that adding the “alpha” class changes;
Adding the “alpha” class back in;
shifts the yellow div back over to it’s rightful place;
Yet the pink child div is still in the wrong place. This is because we need to add the “omega” class to it. Once done, everything lines up perfectly;
The “alpha” class is used on the FIRST “child” div. It shifts the div to the left to make it line up with your design.
The “omega” class is used on the LAST “child” div. It shifts the div to the right to make it line up with your design.
You should use “alpha” and “omega” classes when the div’s you use them on are also grid_* divs, and are inside a parent grid_* div.
As always, if anything looks wrong, let me know – I am by no means an expert on 960 grid, and always looking to learn more about it. These tutorials are only made by my trial and error over the past few weeks.