Vertically aligning the page

gabebw · Apr 3, 2009 · 8e905a8 · 8e905a8
1 parent ed7331b
commit 8e905a8
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 22 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 _site/
+*.swp
diff --git a/css/screen.css b/css/screen.css
@@ -2,17 +2,34 @@
   background: #ddd;
   color: #000;
   text-align: right;
+	float: left;
 }
 
 #right {
   background: #000;
   color: #ddd;
   left: 50%;
+	text-align: left;
+	float: right;
+}
+
+#left_bg {
+  background: #ddd;
+  color: #000;
+}
+
+#right_bg {
+  left: 50%;
+  background: #000;
+  color: #ddd;
 }
 
 .bg {
-  position: absolute;
-  height: 100%;
+	width: 50%;
+	position: absolute;
+	height: 100%;
+}
+.middle {
   width: 50%;
   font-size: 10em;
   font-family: Georgia, Times, sans-serif;
@@ -35,3 +52,7 @@ ul {
 ul li {
   margin: 10px;
 }
+	  .container {top: 0; left: 0; width: 100%; height: 100%;
+		    position: fixed; display: table}
+				  .center {text-align:center; display: table-cell; vertical-align: middle}
+
diff --git a/index.html b/index.html
@@ -14,25 +14,31 @@
    </style>
 </head>
 <body>
-  <div id="left" class="bg">
-    jek
-    <p>
-    transform your text
-    </p>
-    <ul>
-      <li>code</li>
-      <li>docs</li>
-    </ul>
-  </div>
-  <div id="right" class="bg">
-    yll
-    <p>
-    into a monster
-    </p>
-    <ul>
-      <li>faq</li>
-      <li>install</li>
-    </ul>
-  </div>
+	<div id="left_bg" class="bg"></div>
+	<div id="right_bg" class="bg"></div>
+	<div class="container">
+		<div class="center">
+			<div id="left" class="middle">
+				jek
+				<p>
+				transform your text
+				</p>
+				<ul>
+					<li>code</li>
+					<li>docs</li>
+				</ul>
+			</div>
+			<div id="right" class="middle">
+				yll	
+				<p>
+				into a monster
+				</p>
+				<ul>
+					<li>faq</li>
+					<li>install</li>
+				</ul>
+			</div>
+		</div>
+	</div>
 </body>
 </html>