Completed Building a Simple Float Layout

Author: jamesacox53

myWork/04-CSS-Layouts/index.html

@@ -111,42 +111,52 @@ <h3>Why should you learn HTML?</h3>
         </article>
 
         <aside class="related-aside">
-          <h4>Related posts</h4>
+          <h4 class="related-posts-title">Related posts</h4>
           <ul class="related">
             <li>
               <img
+                class="related-article-image"
                 src="images/related-1.jpg"
                 alt="Learn Web Development"
                 width="75"
                 height="75"
               />
-              <a href="#">How to Learn Web Development</a>
+
+              <a href="#" class="related-article-title"
+                >How to Learn Web Development</a
+              >
               <p class="related-author">By Jonas Schmedtmann</p>
             </li>
             <li>
               <img
+                class="related-article-image"
                 src="images/related-2.jpg"
                 alt="Lightning Strike"
                 width="75"
                 height="75"
               />
-              <a href="#">The Unknown Powers of CSS</a>
+              <a href="#" class="related-article-title"
+                >The Unknown Powers of CSS</a
+              >
               <p class="related-author">By Jim Dillon</p>
             </li>
             <li>
               <img
+                class="related-article-image"
                 src="images/related-3.jpg"
                 alt="Code on Screen"
                 width="75"
                 height="75"
               />
-              <a href="#">Why JavaScript is Awesome</a>
+              <a href="#" class="related-article-title"
+                >Why JavaScript is Awesome</a
+              >
               <p class="related-author">By Matilda</p>
             </li>
           </ul>
         </aside>
 
-        <footer>
+        <footer class="article-footer">
           <p class="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
         </footer>
       </div>

myWork/04-CSS-Layouts/style.css

@@ -4,14 +4,10 @@
 }
 
 .container {
-  width: 700px;
+  width: 1200px;
   margin: 0 auto;
 }
 
-.article-content {
-  margin: 0 15px;
-}
-
 body {
   color: #444444;
   font-family: sans-serif;
@@ -132,8 +128,7 @@ a:active {
 
 .article-image {
   margin-bottom: 5px;
-  width: 500px;
-  height: auto;
+  width: 100%;
 }
 
 strong {
@@ -162,7 +157,7 @@ strong {
   cursor: pointer;
 
   position: absolute;
-  bottom: 0;
+  bottom: 20px;
   right: 0;
 }
 
@@ -180,15 +175,15 @@ strong {
   display: inline-block;
   position: absolute;
   padding: 3px 7px;
-  top: -5px;
-  right: -5px;
+  top: 5px;
+  right: 0;
 }
 
 /* Floats */
 
 .author-image {
   float: left;
-  margin-right: 5px;
+  margin-right: 8px;
 }
 
 .author {
@@ -197,10 +192,6 @@ strong {
   margin-bottom: 15px;
 }
 
-.article-image {
-  float: left;
-}
-
 .title-text {
   float: left;
 }
@@ -214,3 +205,37 @@ strong {
   content: "";
   display: block;
 }
+
+.product-article {
+  width: 825px;
+  float: left;
+}
+
+.related-aside {
+  width: 300px;
+  float: right;
+}
+
+.article-footer {
+  clear: both;
+}
+
+.navigation-bar {
+  margin-top: 15px;
+}
+
+.navigation-bar a {
+  margin-right: 20px;
+}
+
+.related-article-title {
+  display: inline-block;
+}
+
+.related li {
+  margin-bottom: 10px;
+}
+
+.related-posts-title {
+  margin-bottom: 10px;
+}