960 Grid Tutorial – Understanding Alpha and Omega classes

By | December 28, 2010

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.

7 thoughts on “960 Grid Tutorial – Understanding Alpha and Omega classes

  1. Tony M


    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:




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

  2. Gary Post author

    The text is wrapping as it has no spaces in the words. If you use real text, it will be fine.

  3. Umid

    Thank you Gary, nice explanation of those strange classes at first glance!!!

  4. Andi

    Perfect! Thanks a lot, this helped me a lot through creating my first 2.3 template.

    Merry Christmas!

  5. Mark

    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

  6. Daniel

    Thanks for the explanation – it really helped me make sense of alpha and omega.

Leave a Reply

Your email address will not be published.