Thom Css-positioning-lab

my-styles.css

@@ -1,4 +1,265 @@
 /* Your Stylesheet */
 
-/* All your edits should go here */
+#display-01 div {
+  display:inline;
+border: 3px solid;
+border-color: blue;
+padding: 0px;
+margin: 20px;
+
+
+
+}
+
+#display-02 span {
+
+  display: block;
+  border:3px solid;
+  border-color: red;
+}
+
+#display-03 div {
+
+  display:inline-block;
+  border: 3px solid;
+  border-color: green;
+  width:10%;
+  height:0;
+  padding-bottom:10%;
+
+}
+
+#display-04 div:nth-of-type(1){
+
+visibility: hidden;
+}
+#display-05 a {
+
+display: block;
+background-color: orange;
+padding: 20px;
+margin:0 25%;
+border:10px;
+
+
+}
+
+#boxmodel-01 div {
+
+margin:auto;
+width:50%;
+padding: 80px;
+border: 25px solid;
+border-color: orange;
+
+}
+
+#boxmodel-02 div {
+
+width:50%;
+padding: 80px;
+border:25px solid;
+margin: auto;
+box-sizing: border-box;
+}
+
+#float-01 img {
+  float: left;
+  margin: 30px 10px 10px 0;
+}
+
+#float-02 img {
+  float: right;
+  margin: 30px 0 10px 10px ;
+
+}
+
+#float-02 p {
+
+  text-justify: auto;
+  text-align: justify;
+}
+
+#float-03 img {
+
+  float: left;
+  margin: 30px 10px 10px 10px;
+}
+
+#float-03 p.clear {
+
+  clear: both;
+}
+
+#float-04 img {
+
+  float: left;
+  margin: 30px 10px 10px 10px;
+
+}
+
+#float-04 div {
+  background:3px;
+  background-color: lightblue;
+display: flow-root;
+}
+
+
+
+#float-05 p:nth-last-of-type(1){
+
+float:left;
+padding: 15px;
+width: 40%;
+border-right:1px solid;
+}
+
+#float-05 p:nth-last-of-type(2) {
+
+float:right;
+padding: 15px;
+width: 40%;
+border-left:1px soild;
+
+}
+
+#float-06 div {
+  content:"";
+  display: table ;
+  clear: both;
+}
+#float-06 p:first-child{
+
+  float:left;
+  padding: 10px;
+  width: 40%;
+  border-right: 1px solid;
+
+}
+
+#float-06 p:nth-of-type(2){
+
+  float:right;
+  padding: 10px;
+  width: 40%;
+}
+
+
 
+  /*Add clearfix hacks to this and float 5 */
+
+#position-01 div {
+background: red;
+
+  width:10%;
+  height:0;
+  padding-bottom:10%;
+}
+
+#position-01 div:nth-child(even){
+
+height:0;
+margin-left: 10%;
+width: 10%;
+padding-bottom: 10%;
+}
+
+
+#position-02 div {
+
+  border:3px solid;
+  border-color: blue;
+ height: 100px
+
+}
+
+#position-02 span:nth-of-type(1) {
+position: absolute;
+top: 35px;
+left: 35px;
+
+
+}
+
+#position-02 span:nth-of-type(2) {
+
+  position: absolute;
+  top: 35px;
+  right: 35px;
+
+}
+
+
+#position-02 span:nth-of-type(3) {
+
+  position: absolute;
+  bottom: 35px;
+  right: 35px;
+
+}
+
+#position-02 span:nth-of-type(4) {
+
+  position: absolute;
+  bottom: 35px ;
+  left: 35px ;
+}
+#position-03 div {
+border:3px;
+border-color:blue;
+height: 100px ;
+}
+#position-03 span:nth-child(1) {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+#position-03 span:nth-child(2) {
+position:absolute;
+top: 12px;
+right: 12px;
+}
+
+#position-03 span:nth-child(3) {
+
+  position: absolute;
+  bottom: 12px;
+  right: 12px
+}
+
+#position-03 span:nth-child(4) {
+
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+}
+
+#position-04 div {
+
+
+}
+
+
+
+#position-05 div {
+
+
+}
+
+
+#position-06 div {
+
+
+}
+
+
+#position-07 div {
+
+
+}
+
+#layout
+
+
+
+/* All your edits should go here */