960 css framework, alpha/omega issue

Question

Im using the 960 css framework. The issue is Im trying to use the full 960 width in a 3 column layout. So Im using the container 16 and using 3 divs with grids. The first and last grid Im using alpha and omega to remove the left and right gutter. It is removing the alpha gutter but not the omega gutter. Here is the html:

<div class="container_16" id="section_body">
    <div class="grid_3 alpha" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>

The css for section body is:

#section_body {
    min-height:500px;
    overflow:hidden;
    background:#fff;
}

Here is a screenshot o the issue, you can see the last div in blue doesnt go all the way to the right. What am I doing wrong?

enter image description here

UPDATE

I tried removing all styling except for the 960 css and the 3 divs and I still have the same issue. No matter what I cant get it to go the whole 960px width. It will only go 940px width.

score 5 · Answer 1 · answered Dec 12 '11 at 14:05

WARNING: There is a typo ("grid16" instead of "grid_16") in Jauzsika's code which makes it work even if it should not (because of the "container_16" and the missing "alpha").

CORRECT ANSWER:

There are two important things to keep in mind:

1) By design, 960gs has a 10px left and right margin, i.e. the actual content area is only 940px wide.

2) When using nested grids, and only in this case, children elements require special classes. The first child needs a class "alpha" and the last child a class "omega".

Since you have NO child div in your code you don't need "alpha" and "omega".

So, both solutions are equivalent (corrected code):

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
    <div class="grid_3" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3" style="background:blue;">body right</div>
</div>

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
<div class="grid_16">
    <div class="grid_3 alpha" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>
</div>

I agree with Vincent. It is the 'alpha' and 'omega' CSS classes which are causing John's problems. Vincent's code is spot on. — So Over It, Feb 21 '12 at 07:45

Jauzsika · Accepted Answer · 2011-08-06T01:10:39.590

0

Because left and right column width is 160 px, they have a left and right margin of 10-10px, thats extra 20 px. The center column is 580px wide, also have 10-10px margins.

So 160+10+ 160+10+ 580+20 = 940px

The 3 column layout you chose is 20px thinner.

The following example has a 10-10 px gutter on each side, so it's dead center.

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
<div class="grid16">
    <div class="grid_3" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>
</div>

edited Aug 06 '11 at 01:10

answered Aug 06 '11 at 00:50

Jauzsika

3,171
3
23
32

So how do I get the remaining 20px auto filled by the third div? Manually set the width to 180px? – John Aug 06 '11 at 00:56
Not really the topic of this issue. Guess I will just figure it out. Thanks for the help! – John Aug 06 '11 at 01:27

960 css framework, alpha/omega issue

2 Answers2