Positions, Float, Media Queries - Float Property Column Layout Example

pktcodes · pktcodes · commit f8c243423960 · 2022-11-06T20:28:57.000-06:00
diff --git a/index.html b/index.html
@@ -11,17 +11,30 @@
   </head>
 
   <body>
-    <div class="banner">
-      <img src="./small.jpeg" alt="retro small" class="first-image" />
-      <img src="./small.jpeg" alt="retro-small" class="second-image" />
+    <div class="first">
       <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit quidem
-        veniam sequi nesciunt ipsa esse neque vero modi, ullam facere quas fugit
-        accusamus dignissimos, aut assumenda adipisci eum necessitatibus eaque
-        facilis corporis asperiores! Sint officia totam temporibus laborum
-        maxime facere voluptas nam quis, eius, iusto placeat laboriosam fuga
-        exercitationem. Enim?
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni,
+        tempora.
       </p>
     </div>
+    <div class="second">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni,
+        tempora.
+      </p>
+    </div>
+    <div class="third">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni,
+        tempora.
+      </p>
+    </div>
+    <!-- <div class="fourth">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni,
+        tempora.
+      </p>
+    </div> -->
+    <h1>hello world</h1>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,18 +1,31 @@
-.banner {
-  border: 5px solid red;
-  padding: 10px;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.first-image {
-  float: left;
+div {
+  height: 200px;
+  width: 50%;
+  float: right;
 }
 
-.second-image {
-  float: right;
-  height: 30px;
+.first {
+  background: red;
 }
-p {
-  /* clear: right;
-  clear: left; */
+
+.second {
+  background: blue;
+}
+
+.third {
+  background: greenyellow;
+}
+
+.fourth {
+  background: fuchsia;
+}
+
+h1 {
   clear: both;
 }
