I recently started working on a personal hobby website and decided to utilize the 960 css grid system for organizing my HTML elements on the page.
After grasping the basic concept, I went ahead and created a preliminary version of the website, which is hosted here on my server.
As I delve deeper into this project, I've encountered a few queries:
<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>
Using a 12-column grid template, each row should ideally add up to a total of 12 grids. However, I'm facing an issue where only 11 grids worth of elements can be placed on the same row without any conflicts. Adjusting the class of the #user_panel element to "grid_3 prefix_4" causes it to move to the next line, disrupting the layout.
Furthermore, while the top-level elements like top_bar and title_bar are correctly positioned with a width of 940px (verified using a helpful Firefox plugin called gridfox), the nested grids are slightly misaligned from their intended positions.
Being new to this css grid system, I'm wondering if there's a more effective way to manage nested elements. The examples showcased on the 960.gs website are truly impressive!
Thank you in advance for any suggestions!
Updated Information
Following the advice provided below, I understand that it's still possible to use colored borders for debugging the nested grids. An interim solution to maintain grid integrity involves implementing the following CSS snippet:
.grid_insider
{
border : 1px solid red;
margin : -1px; /* this prevents element expansion */
}