CSS in Fluid 960 grid system - html

Question

960 grid is great and after downloading it, I noticed that demo.html contains at the end examples of the .push and .pull classes like this one:
<div class="grid_6 push_6">
<div class="grid_1 alpha">
<p>
60, class = "grid_6 push_6" => class = "grid_1 alpha"
</p>
</div>
<!-- end .grid_1.alpha -->
<div class="grid_5 omega">
<p>
380, class="grid_6 push_6" => class="grid_5 omega"
</p>
</div>
<!-- end .grid_5.omega -->
<div class="clear"></div>
<div class="grid_3 alpha">
<p>
220, class="grid_6 push_6" => class="grid_3 alpha"
</p>
</div>
<!-- end .grid_3.alpha -->
<div class="grid_3 omega">
<p>
220, class="grid_6 push_6" => class="grid_3 omega"
</p>
</div>
<!-- end .grid_3.omega -->
</div>
<!-- end .grid_6.push_6 -->
The home page gives a link to a fluid grid system under the title "Custom CSS Generator" which strangely skips to include the above test (press "preview" to see a test).
I decided to add such a test as the css of the fluid grid DOES have these classes!
1) I immediately noticed that there is a problem when you try for example to set a background color in the outermost containing DIV: it doesn't fill the whole content to include my test (contained) cases at the bottom!
What was more strange was the fact that when I used the .clearfix from the css file that I took from the original site (960.gs) the problem was fixed! i.e. this one:
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
content: ' ';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.clearfix:after,
.container_12:after {
clear: both;
}
2) The biggest problem remain with my DIV test cases with classes "grid_6 pull_6" or "grid_6 push_6", which contain DIVs that are shrinked and don't expand in their full width!
Does anybody knows a solution for a fluid grid 960 template that does succeed to present the .pull and .push classes adjacent to each other?
See my point at jsbin.com: try to resize your browser (pixel sizes do not hold, use a picture as background to investigate further)
Thanks!

Answer 1

This solves the problem: "percentages in block elements are based on the width of their parents".
So, even if our "alpha" and "omega" classes are also class "grid_5" or "grid_3" they take 5 or 3 columns out of 12 of their containers which are "grid_6" and NOT of their grand-parent, i.e. "container_12"; that's the big difference from the static template where the measurements are hold on pixels and have nothing to do with parents or grand-parents.
The above calculations should be considered proportionally: a "grid_6" with 1% margins left and right per grid in a-just happened-960px container = a total width of 6*60+5*20 = 460px or 47.916%*960/100 (where the width in the CSS2 box model is defined as border+padding+context and not the broken one of <=IE7 in quirks mode).
Taken the above result of 460px for a "grid_3" child we should measure 22.916%*460/100 = 105.41px and Chrome Developer Tools gives us almost that number as long we resize the window to reach a 960px "container_12"!
Rule of thumb: "the sum of grids in a sub-container should be equal to 12".
So, the above example should become:
<div class="grid_6 push_6">
<div class="grid_2 alpha">
<p>60, class = "grid_6 push_6" => class = "grid_2 alpha"</p>
</div>
<!-- end .grid_2.alpha -->
<div class="grid_10 omega">
<p>380, class="grid_6 push_6" => class="grid_10 omega"</p>
</div>
<!-- end .grid_10.omega -->
<div class="clear"> </div>
<div class="grid_6 alpha">
<p>220, class="grid_6 push_6" => class="grid_6 alpha"</p>
</div>
<!-- end .grid_6.alpha -->
<div class="grid_6 omega">
<p>220, class="grid_6 push_6" => class="grid_6 omega"</p>
</div>
<!-- end .grid_6.omega -->
</div>
See at jsbin.com.