Layout: Floats

Author: DDH

starter/04-CSS-Layouts/flexbox.html

@@ -36,10 +36,42 @@
         /* STARTER */
         font-family: sans-serif;
         background-color: #ddd;
-        font-size: 40px;
+        font-size: 32px;
         margin: 40px;
 
         /* FLEXBOX */
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        /* gap: 30px; */
+      }
+
+      .el {
+        /* margin-right: 30px; */
+
+        /* 
+        DEFAULTS:
+        flex-grow: 0;
+        flex-shrink: 1;
+        flex-basis: auto;
+         */
+        /* flex-basis: 200px; */
+        flex-shrink: 0;
+        flex-grow: 1;
+      }
+
+      .el--1 {
+        align-self: flex-start;
+        flex-grow: 2;
+      }
+
+      .el--5 {
+        align-self: stretch;
+        /* order: 1; */
+      }
+
+      .el--6 {
+        /* order: -1; */
       }
     </style>
   </head>
@@ -51,8 +83,8 @@
       <div class="el el--4">are</div>
       <div class="el el--5">amazing</div>
       <div class="el el--6">languages</div>
-      <div class="el el--7">to</div>
-      <div class="el el--8">learn</div>
+      <!-- <div class="el el--7">to</div>
+      <div class="el el--8">learn</div> -->
     </div>
   </body>
 </html>

starter/04-CSS-Layouts/index.html

@@ -18,30 +18,33 @@ <h6>The Basic Language of the Web: HTML</h6>
     -->
 
     <div class="container">
-      <header class="main-header">
+      <header class="main-header clearfix">
         <h1>📘 The Code Magazine</h1>
 
         <nav>
           <!-- <strong>This is the navigation</strong> -->
           <a href="blog.html">Blog</a>
           <a href="#">Challenges</a>
-          <a href="#">Flexbox</a>
-          <a href="#">CSS Grid</a>
+          <a href="flexbox.html">Flexbox</a>
+          <a href="css-grid.html">CSS Grid</a>
         </nav>
+
+        <!-- <div class="clear"></div> -->
       </header>
 
       <article>
         <header class="post-header">
           <h2>The Basic Language of the Web: HTML</h2>
 
           <img
+            class="author-img"
             src="img/laura-jones.jpg"
             alt="Headshot of Laura Jones"
             height="50"
             width="50"
           />
 
-          <p id="author">
+          <p id="author" class="author">
             Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
           </p>
 

starter/04-CSS-Layouts/style.css

@@ -2,6 +2,7 @@
   /* border-top: 10px solid #1098ad; */
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 /* PAGE SECTIONS */
@@ -14,7 +15,7 @@ body {
 }
 
 .container {
-  width: 800px;
+  width: 1200px;
   /* margin-left: auto;
   margin-right: auto; */
   margin: 0 auto;
@@ -50,7 +51,7 @@ aside {
   border-bottom: 5px solid #1098ad;
   /* padding-top: 50px;
   padding-bottom: 50px; */
-  padding: 50px 0;
+  padding: 50px 40px;
   width: 500px;
 }
 
@@ -82,6 +83,7 @@ h4 {
   font-size: 20px;
   text-transform: uppercase;
   text-align: center;
+  margin-bottom: 30px;
 }
 
 p {
@@ -134,6 +136,7 @@ li:last-child {
 
 .related {
   list-style: none;
+  margin-left: 0;
 }
 
 body {
@@ -265,3 +268,48 @@ footer p {
 nav p {
   font-size: 18px;
 } */
+
+/* FLOATS */
+.author-img {
+  float: left;
+  margin-bottom: 20px;
+}
+
+.author {
+  /* padding-left: 80px; */
+  float: left;
+  margin-top: 10px;
+  margin-left: 20px;
+}
+
+h1 {
+  float: left;
+}
+
+nav {
+  float: right;
+}
+
+/* .clear {
+  clear: both;
+} */
+/* 
+.clearfix::after {
+  clear: both;
+  content: "";
+  display: block;
+} */
+
+article {
+  width: 825px;
+  float: left;
+}
+
+aside {
+  width: 300px;
+  float: right;
+}
+
+footer {
+  clear: both;
+}