From 16e0782553032d0b54b45d023c7561b18c085963 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 13:29:52 -0400
Subject: [PATCH 01/16] added style to #display-01 div

---
 README.md.save | 27 +++++++++++++++++++++++++++
 my-styles.css  |  6 +++++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 README.md.save

diff --git a/README.md.save b/README.md.save
new file mode 100644
index 0000000..5743636
--- /dev/null
+++ b/README.md.save
@@ -0,0 +1,27 @@
+# CSS Positioning
+
+## Instructions
+
+1. Fork this repo and clone your fork to work on it.
+2. Open up the `index.html` file in your browser to see the exercises.
+3. Complete each exercise by adding a new ruleset, or multiple rulesets, in order to style the elements according to the instructions.
+  - Make sure you only edit the `my-styles.css` file. Edits to other files are not allowed.
+  - Make sure your selectors are specific enough to only target the exercise you're working on.
+4. After each exercise, you should add and commit so you can save your progress.
+5. When you're done, push your changes to your remote then submit a Pull Request to the original repo.
+
+
+## Relevant Properties
+
+- [Box Sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
+- [Display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+- [Float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
+- [Position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
+
+
+## Helpful Articles
+
+- [MDN: Introduction to CSS Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) (note: skip Grid, Table, and Multi-Column layouts)
+- [MDN: Layout in Normal Flow](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
+- [A List Apart: CSS Positioning 101](https://alistapart.com/article/css-positioning-101/)
+
diff --git a/my-styles.css b/my-styles.css
index f7d02e4..f3cb532 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -1,4 +1,8 @@
 /* Your Stylesheet */
 
 /* All your edits should go here */
-
+#display-01 div{
+  display: inline;
+  border: thin solid blue;
+  margin: 20px;
+}

From 13bbccd5d20dd9c209720e172013dd6ce4ca68a2 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 13:36:13 -0400
Subject: [PATCH 02/16] added styles to #display-02

---
 my-styles.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index f3cb532..dcc4837 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -6,3 +6,8 @@
   border: thin solid blue;
   margin: 20px;
 }
+#display-02 span{
+  display: block;
+  border: thin solid red;
+  width: 100%;
+}

From 252afd6651a1f2609adf61f81e56cfcb67af114d Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 14:02:45 -0400
Subject: [PATCH 03/16] styled box sizes in #display-03

---
 my-styles.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index dcc4837..9cb283b 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -11,3 +11,10 @@
   border: thin solid red;
   width: 100%;
 }
+#display-03 div{
+    display: inline-block;
+    box-sizing: border-box;
+    width: 50px;
+    height: 50px;
+    border: thin solid green;
+  }

From bbd11af39a139b44f8566bf71ff5bea7fa685f14 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 14:09:37 -0400
Subject: [PATCH 04/16] styled display-04

---
 my-styles.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index 9cb283b..ab4266f 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -18,3 +18,6 @@
     height: 50px;
     border: thin solid green;
   }
+  #display-04 div:nth-of-type(1){
+    display: none;
+  }

From b5aa9b24e34622949af65f3ea9b93c6d98e4a49e Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 14:37:35 -0400
Subject: [PATCH 05/16] styled #display-05

---
 my-styles.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index ab4266f..171de3d 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -21,3 +21,15 @@
   #display-04 div:nth-of-type(1){
     display: none;
   }
+  #display-05 a[href]{
+    display: block;
+    position: relative;
+    width: 50%;
+    padding: 10px;
+    background: gray;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+
+  }

From 6691ed2937d44b4cb1df7431f138ec68454e9842 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 14:44:38 -0400
Subject: [PATCH 06/16] styled #boxmodel-01 centered box

---
 my-styles.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index 171de3d..0f33506 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -30,6 +30,14 @@
     margin-left: auto;
     margin-right: auto;
   }
+  #boxmodel-01 div{
+    display: block;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 40px;
+    border: thick solid black;
+  }
 
 
   }

From 8d4e6f97b34e71b5320ea21988ddd182684a81a4 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 14:48:16 -0400
Subject: [PATCH 07/16] styled box sizes in #boxmodel-02

---
 my-styles.css | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/my-styles.css b/my-styles.css
index 0f33506..a4f6856 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -38,6 +38,13 @@
     padding: 40px;
     border: thick solid black;
   }
-
-
-  }
+  #boxmodel-02 div{
+    display: block;
+    box-sizing: border-box;
+      width: 50%;
+      margin-left: auto;
+      margin-right: auto;
+      padding: 40px;
+      border: thick solid black;
+    }
+  

From 9cc1462b8606f08178af1774ba99aed98b083fbe Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 14:54:57 -0400
Subject: [PATCH 08/16] styled img to float in #float-01

---
 my-styles.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index a4f6856..bee6fa6 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -47,4 +47,10 @@
       padding: 40px;
       border: thick solid black;
     }
+  #float-01 img{
+    float: left;
+    margin-right: 20px;
+    margin-top: 30px;
+    margin-bottom: 10px;
+  }
   

From 60bbcf12e0ea53c5488ad501e219dd835b683536 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 15:01:48 -0400
Subject: [PATCH 09/16] styled float to right on #float-02

---
 my-styles.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/my-styles.css b/my-styles.css
index bee6fa6..2bb024e 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -53,4 +53,12 @@
     margin-top: 30px;
     margin-bottom: 10px;
   }
-  
+  #float-02 img{
+    float: right;
+    margin-left: 20px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+  }
+  #float-02 p{
+    text-align: justify;
+  }

From d175238c25bd9ac099c95ad78c63a44f985d6911 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 15:20:31 -0400
Subject: [PATCH 10/16] floated img to fit paragraphs in #float-03

---
 my-styles.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index 2bb024e..18d168e 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -62,3 +62,14 @@
   #float-02 p{
     text-align: justify;
   }
+  #float-03 img{
+    float: left;
+    margin-right: 20px;
+    margin-top: 30px;
+    margin-bottom: 10px;
+    margin-left: auto;
+  }
+  #float-03 p.clear{
+    float: left;
+  }
+  

From 7e28c91ed9a90074ddc234a90fb07bd7215ed428 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 15:26:37 -0400
Subject: [PATCH 11/16] added float styles and background color to #float-04

---
 my-styles.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/my-styles.css b/my-styles.css
index 18d168e..b33b99a 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -72,4 +72,14 @@
   #float-03 p.clear{
     float: left;
   }
-  
+  #float-04 img{
+    float: left;
+    margin-right: 20px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+    margin-left: 20px;
+  }
+#float-04 div{
+  float: left;
+  background-color: lightblue;
+}

From 07c573eb85195fce11d05ecc53c4d353e27a614b Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 15:29:16 -0400
Subject: [PATCH 12/16] styled #float-04 with backgrounds and float

---
 my-styles.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/my-styles.css b/my-styles.css
index b33b99a..e0677bb 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -75,11 +75,12 @@
   #float-04 img{
     float: left;
     margin-right: 20px;
-    margin-top: 30px;
+    margin-top: 20px;
     margin-bottom: 20px;
     margin-left: 20px;
   }
 #float-04 div{
   float: left;
   background-color: lightblue;
+  margin: 10px;
 }

From 18dac9461c63c0e98cb95be94cbfb83bca38d45d Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 15:47:56 -0400
Subject: [PATCH 13/16] styled #float-05 to have columns

---
 my-styles.css | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/my-styles.css b/my-styles.css
index e0677bb..96687cb 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -79,8 +79,20 @@
     margin-bottom: 20px;
     margin-left: 20px;
   }
-#float-04 div{
+  #float-04 div{
   float: left;
   background-color: lightblue;
   margin: 10px;
 }
+  #float-05 p:first-child{
+    box-sizing: content-box;
+    width: 45%;
+    float: left;
+    padding: 20px;
+    border-right: thin solid black;
+  }
+  #float-05 p{
+    box-sizing: content-box;
+    width: 45%;
+    float: right;
+  }

From 7fcf9645771b6abe3b78dee9768983811d866208 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 20:09:53 -0400
Subject: [PATCH 14/16] styled #float-06 by floating content

---
 my-styles.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/my-styles.css b/my-styles.css
index 96687cb..55a6e30 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -70,7 +70,7 @@
     margin-left: auto;
   }
   #float-03 p.clear{
-    float: left;
+    clear: both;
   }
   #float-04 img{
     float: left;
@@ -96,3 +96,21 @@
     width: 45%;
     float: right;
   }
+  #float-06 div p:first-child{
+    box-sizing: content-box;
+    width: 40%;
+    float: left;
+    border-right: thin solid black;
+    padding-right: 50px;
+  }
+  #float-06 div p{
+    box-sizing: content-box;
+    width: 40%;
+    float: right;
+
+  }
+  #float-06 >p{
+    box-sizing: content-box;
+    clear: both;
+    width: 100%
+  }

From ea45980a10ff1aecc787949b359e759710958187 Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 20:36:32 -0400
Subject: [PATCH 15/16] styled #position-01 to make checkered boxes

---
 my-styles.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index 55a6e30..cddd07b 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -114,3 +114,17 @@
     clear: both;
     width: 100%
   }
+  #position-01 div{
+    box-sizing: border-box;
+    background-color: red;
+    width: 50px;
+    height: 50px;
+  }
+  #position-01 div:nth-child(odd){
+    clear: both;
+
+  }
+  #position-01 div:nth-child(even){
+    clear: both;
+    margin-left: 50px;
+  }

From 7b9a6bb920d7edb70a44b5abc8e931bdcc94430f Mon Sep 17 00:00:00 2001
From: Cody Martin <codemart10@gmail.com>
Date: Thu, 19 Sep 2019 20:49:32 -0400
Subject: [PATCH 16/16] styled #position-02  boxes into corners

---
 my-styles.css | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/my-styles.css b/my-styles.css
index cddd07b..390527e 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -127,4 +127,28 @@
   #position-01 div:nth-child(even){
     clear: both;
     margin-left: 50px;
-  }
+}
+  #position-02 div span{
+    box-sizing: border-box;
+    border: thin solid black;
+  }
+  #position-02 div span:first-child{
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  #position-02 div span:nth-child(2){
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+  #position-02 div span:nth-child(3){
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+  }
+  #position-02 div span:nth-child(4){
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+}