Update my-styles.css

my-styles.css

@@ -2,3 +2,197 @@
 
 /* All your edits should go here */
 
+#display-01 > div {
+  display: inline;
+  border: 1px solid blue;
+  margin: 20px;
+}
+
+#display-02 > span {
+  display: flex;
+  border: 1px solid red;
+  width: 100%
+}
+
+#display-03 > div {
+  display: inline-block;
+  border: 1px solid green;
+  height: 50px;
+  width: 50px;
+}
+
+  /* Start of display-04 */
+  /* Don't display the first div.
+  But display the second. */
+
+#display-04 div:nth-of-type(1) {
+  display: none;
+}
+#display-04 div:nth-of-type(2) {
+  display: inline;
+}
+/* End of display-04 */
+
+#display-05 > a {
+ display: inline-block;
+ box-sizing: border-box;
+ background-color: gray;
+ width: 50%;
+ padding: 5%;
+ margin-left: 25%;
+}
+
+#boxmodel-01 > div {
+  height: 50%;
+  width: 50%;
+  border: 5px solid black;
+  padding: 25px;
+  margin: auto;
+}
+
+#boxmodel-02 > div {
+  display: inline-flex;
+  width: 50px;
+  margin: 50px;
+  padding: 50px;
+  border: 50px solid black;
+
+}
+
+#float-01 > img {
+  float: left;
+  margin-top: 25px;
+  margin-right: 15px;
+  margin-bottom: 10px;
+  margin-left: 0px;
+}
+
+/* float-02 */
+#float-02 > img {
+  float: right;
+  margin-top: 25px;
+  margin-right: 0px;
+  margin-bottom: 10px;
+  margin-left: 15px;
+}
+
+#float-02 > p {
+  text-align: justify;
+}
+/* End of float-02 */
+
+/* float-03 */
+#float-03 > img {
+  float: left;
+  margin-top: 25px;
+  margin-right: 15px;
+  margin-bottom: 10px;
+  margin-left: 15px;
+}
+
+#float-03 .clear {
+  clear: left;
+}
+/* End of float-03 */
+
+/* Start of float-04 */
+#float-04 > img {
+  float: left;
+  margin-top: 25px;
+  margin-right: 15px;
+  margin-bottom: 10px;
+  margin-left: 15px;
+}
+
+#float-04 > div {
+  background-color: #ADD8E6;
+}
+
+#float-04 div::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+/* End of float-04 */
+
+/* Start of float-05 */
+#float-05 p {
+  box-sizing: border-box;
+}
+
+#float-05 p:first-child {
+  float: left;
+  width: 50%;
+  border-right: 1px solid black;
+  padding: 15px;
+}
+
+#float-05 p:last-child {
+  float: right;
+  width: 50%;
+  padding: 15px;
+}
+/* End of float-05 */
+
+/* Start of float-06 */
+#float-06 p {
+  box-sizing: border-box;
+}
+
+#float-06 div p:first-child {
+  float: left;
+  width: 50%;
+  padding: 10px;
+  border-right: 1px solid black;
+}
+
+#float-06 div p:last-child {
+  float: right;
+  padding: 10px;
+  width: 50%;
+}
+
+#float-06 div::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+/* End of float-06 */
+
+/* To work on later */
+
+/*
+
+#position-01 {
+
+}
+
+#position-02 {
+
+}
+
+#position-03 {
+
+}
+
+#position-04 {
+
+}
+
+#position-05 {
+
+}
+
+#position-06 {
+
+}
+
+#position-07 {
+
+}
+
+#layout {
+
+}
+
+*/