docs(layout): update css-utilities to show float properly (#2808)

closes #265
ionic-team · Mar 7, 2023 · 358cfdc · 358cfdc · vercel · Mar 7, 2023
1 parent f623fc9
commit 358cfdc
Showing 1 changed file with 30 additions and 10 deletions.
diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md
@@ -134,17 +134,37 @@ The float CSS property specifies that an element should be placed along the left
 ```html
 <ion-grid>
   <ion-row>
-    <ion-col class="ion-float-left">
-      <div>
-        <h3>float-left</h3>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
-      </div>
+    <ion-col>
+      <h3>no float</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
     </ion-col>
-    <ion-col class="ion-float-right">
-      <div>
-        <h3>float-right</h3>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
-      </div>
+    <ion-col>
+      <h3>float-left</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+        class="ion-float-left"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
+    </ion-col>
+    <ion-col>
+      <h3>float-right</h3>
+      <img
+        alt="Silhouette of a person's head"
+        src="https://ionicframework.com/docs/img/demos/avatar.svg"
+        height="50px"
+        class="ion-float-right"
+      />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
+      vehicula lorem.
     </ion-col>
   </ion-row>
 </ion-grid>