Added .grid-container and .unit

isofarro · Apr 18, 2009 · d23d4e8 · d23d4e8
1 parent 9b99d33
commit d23d4e8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git a/debug.css b/debug.css
@@ -8,6 +8,15 @@ body {
 }
 
 #content, #related {
-	height: 96px;
+	height: 256px;
 	background-color: #ddd;
+}
+
+#content.grid-container {
+	height: 266px;
+}
+
+.unit {
+	height: 48px;
+	background-color: #0099cc;
 }
diff --git a/grid.css b/grid.css
@@ -0,0 +1,19 @@
+/****************************************************************************
+*
+* Grid layout
+*
+****************************************************************************/
+
+.grid-container {
+	margin: 0;
+}
+
+#content.grid-container {
+	margin: 0;
+	width: 650px;
+}
+
+.unit {
+	overflow: hidden;
+}
+
diff --git a/template.html b/template.html
@@ -8,14 +8,28 @@
 	<meta name="keywords" content="">
 	<link rel="stylesheet" type="text/css" href="reset.css" media="screen"> 
 	<link rel="stylesheet" type="text/css" href="layout.css" media="screen"> 
+	<link rel="stylesheet" type="text/css" href="grid.css" media="screen"> 
 
 	<link rel="stylesheet" type="text/css" href="debug.css" media="screen"> 
 </head>
 <body>
 
 	<div id="page">
 		<div id="header">Header</div>
-		<div id="content">Main content</div>
+		<div id="content" class="grid-container">
+			<!-- Start of main content -->
+
+			<div class="unit">
+
+			</div>			
+
+			<div class="unit">
+
+			</div>			
+
+			Main content
+			<!-- End of main content -->
+		</div>
 		<div id="related">Sidebar</div>
 		<div id="footer">Footer</div>
 	</div>