960 grid system - nested grids have layout problem

Question

I've just started developing a hobby site for myself, and trying to use the 960 css grid system to layout my html elements on screen.

I got the basic idea and just implemented a skeleton website here on my server

There are several questions I've got so far:

<div class="container_12">
<div class="grid_12">
    <div id='top_bar' class='grid_insider'><!-- start of #top_bar -->

        <ul id='top_menu' class='grid_5'><!-- start of #top_menu -->
            <li>Home</li>
            <li>Fake1</li>
            <li>Fake2</li>
            <li>Fake3</li>
        </ul><!-- end of #top_menu -->
        <ul id='user_panel' class='grid_2 prefix_4'><!-- start of #user_panel -->

            <li>log in</li>
            <li>faq</li>
        </ul><!-- end of #user_panel -->

    </div><!-- end of #top_bar -->
</div>
<div class="clear"></div>
<div id='title_bar' class="grid_12">
    <h1 id="logo" align='center'>LOGO, TITLE and SLOGAN all go here!</h1>

</div><!-- end .grid_1 -->
<div class="clear"></div>

I am using a grid 12 based template, hence the total number of "grids" on each "row" should be 12. However, I can only make the two elements on the same "row" with total number of grids added up to 11, but not 12. If I change the #user_panel"'s class to "grid_3 prefix4", then that would actually take this element to the next line, which breaks everything.

Another thing is, although the first-level elements such as the top_bar and title_bar are on the right position (you can confirm that using a handy Firefox plugin gridfox), with exact width of 940px, the nested grids are not in positions they are supposed to be (a bit away from the designed positions).

I am new to this css grid system, is there a better way to manage the nest elements? I have to say some of the sample websites on the 960.gs are quite amazing to see :)

Thanks for any suggestion in advance!

Updated Info

Okay, based on the answer below, I reckon it is still possible to use colored borders when debugging the nested grids, there is an adhoc way to "cheat":

.grid_insider
{
    border : 1px solid red;
    margin : -1px; /* this will stop the element from 'expanding' its space */
}

Causeuse

Please don't use align: center It is a deprecated attribute. If you need something centered, give it a width and use margin: 0 auto – Anselme

@Yi Jiang: Thanks for pointing that out, I was a bit lazy to use a inline style to align that h1 to center. Of course I will not use it for the real site :) – Causeuse

You shouldn't really do that, because that would override any margin .grid_insider may already have. Like I said, outline works better, in my opinion. – Anselme

Answer 1

Not sure if you haven't realized, but the framework does provide a method for nested elements.

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
------------------------------------------------*/

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}

This overrides the margins they give to all grid elements, thus allowing the elements on the side to rest against the sides of their containers.

What you'd need to do is to give the left menu bar the alpha class, the right one the omega class. Then, you'll have to remove all of the borders you added to those two elements and their container. This is because CSS floats are very precise, and will break if you make the elements any larger than the framework defined.

If you need to add borders you'll have to add some additional styles that override these and give them widths two px (one for each side of the border) smaller than it is defined in the framework.

Anselme

@Yi Jiang: Thanks for this tip! Never knew/realized that there is already a built-in way of doing this... – Causeuse

@Yi Jiang: And you are right, I really shouldn't use colored borders to try debugging in this adhoc way, there must be a better way of doing this :) – Causeuse

@Micheal You can use the outline property. Its like border, but doesn't actually change the width of the element. And use Firebug - you can then edit the page in an ad-hoc manner insider your browser :) – Anselme

@Yi Jiang: Maybe I've found a way to still enable me to use colored borders to debug, please check my updated question description. – Causeuse

Answer 2

and a very late answer....

use either outline for your borders

`outline: 1px solid red;`

or use box-sizing

     .gridInsider {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
     }

Kristiekristien