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 css 960.gs

Edit
Report