4

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,

Lee
  • 5,816
  • 6
  • 45
  • 61

3 Answers3

5

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>
Austin S.
  • 304
  • 1
  • 6
  • Thank you for taking the time to write up a detailed explanation. I was hoping their was a native class within the 960 grid system to do as i required without adding my own CSS.. Even though i didnt get the exact answer i was looking for, i did learn a few things from your post.. – Lee Nov 01 '11 at 20:16
2

You're not using the 960 system as it was designed. The margins that are removed with alpha and omega classes would make it add up to 960 pixels.

Alpha and omega only remove the margin on the left and right respectively, they don't change the widths. If you want this to work, you will need to add a class to the grid_9 omega div, giving it a wider-than-standard width. 720px, maybe?

<style>
.wide_9{width:720px;}
</style>

<div class="container_12">
   <div class="grid_3 alpha"></div>
   <div class="grid_9 wide_9 omega"></div>
</div>
daveyfaherty
  • 4,585
  • 2
  • 27
  • 42
  • Wait, you're saying "You're not using the 960 system as it was designed" and then using a hack to get things to work? I don't use 960gs but that doesn't seem right, plus OP said he wanted to "correct this behaviour using 960 methods". So there's no way to do it "natively" with the grid framework? – Wesley Murch Nov 01 '11 at 16:37
  • I wouldn't call defining a class and setting it's width to be a hack. It's reasonable to assume the OP knows to not put style tags in the body. If he wants non-standard behaviour, he needs to add his own css. I haven't seen any provision for what he wants to do in the grid css. Frameworks like this give you a great foundation, but if you want to do anything special, you need to add your own css. That's a given. – daveyfaherty Nov 01 '11 at 16:44
  • Yes "hack" is too strong of a term, I'm just surprised that there wouldn't be a solution for this built in, especially if the `alpha` class is working out for the first div. +1 then, but maybe adding a class to the container like `full-width` would be a good solution. – Wesley Murch Nov 01 '11 at 16:46
0

You need to use alpha and omega classes on child elements. If your layout needs to touch margins (you use background), correct usage of alpha and omega classes will look like something like this attaching background to grid_12 div.

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

or if you don't need background alignment, you can simply omit alpha and omega classes

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

Both these snippets should look same in browser.

icebreaker
  • 1,224
  • 17
  • 33