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 */
}

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.