960 Grid Tutorial – Understanding Alpha and Omega classes

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;

Summary

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.

7 Replies to “960 Grid Tutorial – Understanding Alpha and Omega classes”

  1. Hi,

    This helped thank you. However, I put some test text in each column and the text just stays on one line and overlaps over the other grids. It is as if the grids don’t have margins.

    This my cod:

    111111111111111111111111111111111111111111111111111111111

    2222222222222222222222222222

    3333333333333333333333333333

    The “1’s” overlap the middle grid. May I ask for help as to what I am missing? Thank you for your time.

  2. Hi, will this work with 2.3.3 because I copy the code but don’t get the colors and this is conents area is not fully to the right

Leave a Reply

Your email address will not be published. Required fields are marked *