Css In Fluid 960 Grid System

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:

Solution 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:

<divclass="grid_6 push_6"><divclass="grid_2 alpha"><p>60, class = "grid_6 push_6" => class = "grid_2 alpha"</p></div><!-- end .grid_2.alpha --><divclass="grid_10 omega"><p>380, class="grid_6 push_6" => class="grid_10 omega"</p></div><!-- end .grid_10.omega --><divclass="clear">&nbsp;</div><divclass="grid_6 alpha"><p>220, class="grid_6 push_6" => class="grid_6 alpha"</p></div><!-- end .grid_6.alpha --><divclass="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.

Share