Float is Cooler Than You Think Using CSS shapes and floats to enhance your layouts

Once upon a time, we didn't have much of a choice but to to use float to create our layouts, and by and large at best we didn't love it, and that is if we didn't downright hate it. Today the use of the CSS float property has fallen by the wayside but what if I told you it can do some really cool stuff? Coupled with some modern CSS properties like shape we can make some really cool things happen. Let's take a closer look.

Float

The CSS property float allows content to be placed at the right or left of its container. One thing float was always great at is wrapping text around an image inside of a paragraph, such as in the example laid out below.

Floated Image HTML
<img src="...image.png" alt="">
<p>OW, since architects, painters...</p>
Floated Image CSS
img { float: left; }
Output of figures 1 and 2, an image is to the left with a paragraph of text wrapping around it. Even though the image has an odd shape the text wraps around it in square fashion.
Floated Image Output

The text wraps around the image, but it's a bit awkward. The text flows in a very square fashion leaving a big section of white space around our figure. This is where CSS shapes come in.

Shapes

Still in draft status, CSS Shapes can be used to change the general shape of an element. Elements by default are rectangular. By using properties shape-outside and clip-path, the shape of an element can be redefined as something else than a rectangle. When content is floated against a shaped element, it will follow its newfound shape.

Shape Outside & Clip Path

The shape-outside property redefines the shape of the element for the content to wrap around.

clip-path acts like a mask, and hides parts of the image that fall outside of the parameters it is passed.

It is important to understand that everything in CSS is still rectangular, and once we start playing this little game, our borders and box shadows are going to continue to behave as though our element is rectangular. Borders and shadows within the definition of the shape will still be visible, but if they fall ouside of the area defined by clip-path they will no longer be visible. Outline will behave in much the same manner.

In both shape-outside and clip-path we can use premade shapes by using functions like circle() or create our own shape by using polygon(). Let's create our own to match our image.

Think of writing values for the polygon as if you were drawing on an Etch-A-Sketch. You are going to pass it percent-based coordinates and the function will draw a line beetween these points to create a polygon.

polygon(0% 0%, 34% 0%, 34% 30%, 100% 100%, 0% 100%)

Once our shape is written, we then pass this value to both shape outside and clip-path.

CSS Shapes applied to an image CSS
img { 
  float: left;
  clip-path: polygon(0% 0%, 34% 0%, 34% 30%, 100% 100%, 0% 100%);
  shape-outside: polygon(0% 0%, 34% 0%, 34% 30%, 100% 100%, 0% 100%);
}
output of listing 3 when applied the HTML of listing 1. The text flows around the image following the shape of the image as directed by the polygon function described above.
Listing 3 Output

Shape Margin

Our text now follows the shape of our image nicely, but is a little cramped, so let's add some breathing room. I am going to use shape-margin to accomplish this task. shape-margin sets a margin for the shape which allows us to dictate the distance between the edge of our shape and our text.

CSS Property shape-margin
img { 
  float: left;
  clip-path: polygon(0% 0%, 34% 0%, 34% 30%, 100% 100%, 0% 100%);
  shape-outside: polygon(0% 0%, 34% 0%, 34% 30%, 100% 100%, 0% 100%);
  shape-margin: 2ch;
}
Text wrapped around the image but with space between the shaped image and the text
Listing 4 Output

That's it! We have text that beautifully follows the shape we have created in order to give our typography and layout that little extra pizzazz. A copy of the code presented can be found below. Happy Coding!

Consulting

Our expertise helps your team ramp up on new technologies or practices, or to fill short-term skills gaps.

Read more about Consulting with Andromeda