BNL Home

Nested Grid Elements

Some considerations need to be made when placing a <grid_x> element within a parent element. Those considerations differ slightly from fixed-width to fluid grid templates.

Grid Within Bounding Boxes or Tabs

▼ — Almost Identical Rules for Fixed-Width and Fluid Grid Pages — ▼

Fixed-Width Template

body »
container_x »
grid_x »
container element (bounding box or tabs) »
container_a » grid_b, grid_c, grid_d 

<div (.boundingBox or .tabInnerShell)>

	<div class="container_a">
	
		<div class="grid_a alpha omega">
		
		</div><!--.grid_a .alpha .omega-->
		
		<div class="clear"></div>
		
		<div class="grid_b alpha">
		
		</div><!--.grid_b .alpha-->
		
		<div class="grid_c">
		
		</div><!--.grid_c-->
		
		<div class="grid_d omega">
		
		</div><!--.grid_d .omega-->
		
	</div><!--.container_a-->

</div><!--.boundingBox or .tabInnerShell-->

The Rules:

  • The container_a div can be a container_12, container_16 or container_24.
  • While not required, the first grid element in each row should have a class of alpha.
  • While not required, the last grid element in each row should have a class of omega.
  • The grid elements in any row must add up to the number of the container element. In the example above, the single number in the first grid row (a) must equal the number of the number of the parent container (a). The numbers (b) (c) (d) in the multiple grid row must also add up to the number of the container element (a).

Fluid Grid Template

body »
container_x »
grid_x »
container element (bounding box or tabs) »
container_a » grid_b, grid_c, grid_d 

<div (.boundingBox or .tabInnerShell)>

	<div class="container_a">
	
		<div class="grid_a alpha omega">
		
		</div><!--.grid_a .alpha .omega-->
		
		<div class="clear"></div>
		
		<div class="grid_b alpha">
		
		</div><!--.grid_b .alpha-->
		
		<div class="grid_c">
		
		</div><!--.grid_c-->
		
		<div class="grid_d omega">
		
		</div><!--.grid_d .omega-->
		
	</div><!--.container_a-->
	
</div><!--.boundingBox or .tabInnerShell-->

The Rules:

  • The container_a div can be a container_12, container_16 or container_24.
  • The first grid element in each row must have a class of alpha. This is optional in fixed-width pages.
  • The last grid element in each row must have a class of omega. This is optional in fixed-width pages.
  • The grid elements in any row must add up to the number of the container element. In the example above, the single number in the first grid row (a) must equal the number of the number of the parent container (a). The numbers (b) (c) (d) in the multiple grid row must also add up to the number of the container element (a).
 

Grid Divs Within Grid Div
No container separating child grid divs from parent grid div

body »
container_x »
grid_y »
grid_b, grid_c, grid_d 

<div class="container_x">

	<div class="grid_y">
	
		<div class="grid_a alpha omega">
		
		</div><!--.grid_a .alpha .omega-->
		
		<div class="clear"></div>
	
		<div class="grid_b alpha">
		
		</div><!--.grid_b .alpha-->
		
		<div class="grid_c">
		
		</div><!--.grid_c-->
		
		<div class="grid_d omega">
		
		</div><!--.grid_d .omega-->

		<div class="clear"></div>

	</div><!--.grid_y-->
	
</div><!--.container_x-->

The Rules:

  • The first grid element in each row must have a class of alpha.
  • The last grid element in each row must have a class of omega.
  • The grid elements in any row must add up to 24. In the example above, the single number in the first grid row (a) must be 24. The numbers (b) (c) (d) in the multiple grid row must also add up to 24.