edited page layout with floats

Author: rahilsama

starter/03-CSS-Fundamentals/index.html

@@ -154,4 +154,4 @@ <h4>Related posts</h4>
       </footer>
     </div>
   </body>
-</html>
+</html>

starter/04-CSS-Layouts/index.html

@@ -18,7 +18,7 @@ <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>
@@ -28,6 +28,8 @@ <h1>📘 The Code Magazine</h1>
           <a href="#">Flexbox</a>
           <a href="#">CSS Grid</a>
         </nav>
+
+        <!-- <div class="clear"></div> -->
       </header>
 
       <article>
@@ -39,9 +41,10 @@ <h2>The Basic Language of the Web: HTML</h2>
             alt="Headshot of Laura Jones"
             height="50"
             width="50"
+            class="author-img"
           />
 
-          <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

@@ -14,7 +14,7 @@ body {
 }
 
 .container {
-  width: 800px;
+  width: 1200px;
   /* margin-left: auto;
   margin-right: auto; */
   margin: 0 auto;
@@ -265,3 +265,50 @@ footer p {
 nav p {
   font-size: 18px;
 } */
+
+/* Using Floats */
+.author-img {
+  float: left;
+}
+
+.author {
+  /* padding-left: 80px; */
+  margin-top: 10px;
+  margin-left: 10px;
+  float: left;
+}
+
+h1 {
+  float: left;
+}
+
+nav {
+  float: right;
+}
+
+.clear {
+  clear: both;
+}
+
+.clearfix::after {
+  clear: both;
+  content: "";
+  display: block;
+}
+article {
+  /* background-color: green; */
+  width: 825px;
+  float: left;
+}
+
+aside {
+  /* background-color: red; */
+  width: 300px;
+  float: right;
+}
+
+footer {
+  width: 1200;
+  clear: both;
+  /* background-color: blue; */
+}