diff --git a/README.md b/README.md
new file mode 100644
index 00000000..620cc9e8
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+Please contact me if you have any questions.  This is my work on the css_layout exercises.
diff --git a/display-exercise.html b/display-exercise.html
index 433b6cba..362b66aa 100644
--- a/display-exercise.html
+++ b/display-exercise.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>CSS Layout Exercises | display property</title>
-  <meta charset="utf-8" name="description" content="Layout exercise on `display` property for Thinkful's front end web development course">
+  <title>CSS Layout Exercises | position property</title>
+  <meta charset="utf-8" name="description" content="Layout exercise on `position` property for Thinkful's front end web development course">
 
   <!-- fonts  -->
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
@@ -10,13 +10,23 @@
   <!-- reset -->
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
 
-  <!-- styles -->
+  <!--testing 1,2, 3 -->
   <link rel="stylesheet" type="text/css" href="styles/main.css">
-  <!-- your styles will go in display-page.css -->
   <link rel="stylesheet" type="text/css" href="styles/display-page.css">
 </head>
 <body>
-<!-- your HTML here to implement the colored box design -->
-	<p>Placeholder!</p>
+  <main>
+    <div class="box-parent">
+      <div class='centered'>
+        <div class='box box_half green'></div>
+        <div class='box box_half blue'></div>
+      </div>
+      <div class='centered'>
+        <div class='box box_third grey'></div>
+        <div class='box box_third black'></div>
+        <div class='box box_third orange'></div>
+      </div>
+    </div>
+  </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/position-exercise.html b/position-exercise.html
index 8b60d474..53aabf19 100644
--- a/position-exercise.html
+++ b/position-exercise.html
@@ -12,14 +12,12 @@
 
   <!-- styles -->
   <link rel="stylesheet" type="text/css" href="styles/main.css">
-
-  <!-- your styles go in position-page.css -->
   <link rel="stylesheet" type="text/css" href="styles/position-page.css">
 </head>
 <body>
-  <!-- To finish the design, the HTML for the nav requires no additional elements, just the right CSS -->
-  <nav>
-    <img src="images/icon.png">
+  <!-- put your nav code in the nav element-->
+  <nav class="container">
+    <img src="images/icon.png" class="icon-img">
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="display-exercise.html">display</a></li>
@@ -28,7 +26,12 @@
   </nav>
 
   <main>
-    <!-- Put the HTML you need to accomplish the design -->
+    <div class="hero-image">
+      <div class="box">
+        <img src="images/spacecat.png" class='spacecat'>
+        <img src="images/spacedog.png" class='spacedog'>
+      </div>
+    </div>
   </main>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/styles/display-page.css b/styles/display-page.css
index e69de29b..b310b94a 100644
--- a/styles/display-page.css
+++ b/styles/display-page.css
@@ -0,0 +1,51 @@
+main {
+  font-size: 0;
+}
+
+
+.box-parent {
+  margin-top: 90px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 800px;
+}
+
+.box {
+  border: 1px solid black;
+  display: inline-block;
+}
+
+.box_half {
+  width: 50%;
+  height: 200px;
+}
+
+.box_third {
+  width: 33.33%;
+  height: 300px;
+}
+
+.black {
+  background-color: black;
+  border: 1px solid;
+}
+
+.green {
+  background-color: green;
+}
+
+.grey {
+  background-color: grey;
+}
+
+.blue {
+  background-color: blue;
+}
+
+.orange {
+  background-color: orange
+}
+
+.centered {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/styles/float-page.css b/styles/float-page.css
index 7bf3ead4..3f716eb4 100644
--- a/styles/float-page.css
+++ b/styles/float-page.css
@@ -10,3 +10,19 @@ main {
   margin-left: auto;
   margin-right: auto;
 }
+
+
+.left, .right {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.left {
+  float: left;
+  margin-right: 15px;
+}
+
+.right {
+  float: right;
+  margin-left: 15px;
+}
diff --git a/styles/position-page.css b/styles/position-page.css
index 8b137891..77998541 100644
--- a/styles/position-page.css
+++ b/styles/position-page.css
@@ -1 +1,74 @@
+.container {
+  padding-left: 60px;
+  padding-right: 60px;
+}
 
+nav {
+  height: 60px;
+  background-color: grey;
+  position: fixed;
+  width: 100%;
+}
+
+nav .icon-img {
+  height: 50px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  border-radius: 50%;
+  vertical-align: middle;
+  border: 1px solid black;
+}
+
+nav ul {
+  display: inline-block;
+  list-style: none;
+}
+
+nav li {
+  display: inline-block;
+}
+
+nav li::after {
+  content: "|";
+  margin-left: 5px;
+}
+
+nav a:hover {
+  color: black;
+}
+
+body {
+  background: url(../images/outerspace_landscape.jpeg) no-repeat;
+  background-size: cover;
+}
+
+main {
+  padding-top: 90px;
+  min-width: 1000px;
+}
+
+.box {
+  margin-top: 150px;
+  width: 600px;
+  height: 300px;
+  position: relative;
+  border: 10px dotted green;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+.spacecat, .spacedog {
+  position: absolute;
+  width: 200px;
+}
+
+.spacecat {
+  top: -90px;
+  left: -90px;
+}
+
+.spacedog {
+  bottom: -120px;
+  right: -60px;
+}
