Home/ Questions/Q 6760477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T14:04:07+00:00

i am using the 960 grid system to try and create a layout… I

  • 0

i am using the 960 grid system to try and create a layout… I have the following code:

<div class="container_12">
   <div class="grid_3 alpha"></div>
   <div class="grid_9 omega"></div>
</div>

I am using alpha and omega to remove the left and right margin respectively.. This enables the divs to touch the left edge of the container..

The problem however is the right hand grid_9 omega does not touch the right hand side. I understand why this is happening, but i do not know how to correct this behaviour using 960 methods..

Thanks,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It may help to understand the fundamentals behind the 960 grid framework. This framework is based off of a very simple principle that combines fixed width and margins to create a grid like layout for rapid website development. The entire framework utilized float: left which allows the girds to display side-by-side as well as creating the 20px buffer between each grid. And Thus I believe you are misunderstanding the use of the "alpha" and "omega" classes. These classes are intended to remove margins on grids that are children of other grids so that the margin is multiplied.

    Take this code for example:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
</head>
<body>

<div class="container_12" style="background:blue;">
   <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div>
   <div class="grid_9 omega" style="background:green;">Grid_9 Omega</div>
</div>

</body>
</html>

    This produces something similar to:
    Standard 960 layout
    you will notice that there is no margin to the left of Grid_3 but there is a 20 pixel margin between Grid_3 and Grid_9. This is caused by Grid_3 having a margin-right:10px and Grid_9 having a margin-left:10px. When both divs are floated left they produces this spacing. You will also notice that there is another 10px margin to the right of Grid_9. This is due to the fact that the left margin has been removed to Grid_3 and is now shifted the entire layout over 10px inside the container_12 div.

    In order to achieve the layout you described. Which from my understanding should look like this:
    960 layout with Float

    You will need to either create a new class to apply a float:right to Grid_9 or increase Grid_9 width.

    To do this inline would look something like this:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>960 Grid System &mdash; Demo</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960.css" />
</head>
<body>

<div class="container_12" style="background:blue;">
   <div class="grid_3 alpha" style="background:yellow;">Grid_3 Alpha</div>
   <div class="grid_9 omega" style="float:right; background:green;">Grid_9 Omega</div>
</div>

</body>
</html>
    • 0