Wrap text around an image using float

Use float to wrap text around images and clear a wrapped element.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

To float an image to the left and have the text underneath wrap around:

  1. Select an image that sits on top of text elements
  2. Open layout settings in the Style panel
  3. Select float left
  4. Add margin to the right and bottom to create space between the image boundaries and wrapping content
 

When floating an image to the right, remember to add left and bottom margin to create space.

Clearing a wrapped element

To set clear on an element that’s being wrapped:

  1. Select the element below a floated element
  2. Open layout settings in the Style panel
  3. Select the Clear value that you want to set
 

Creating custom columns with floats

You can use floats to stack elements horizontally and fill up the entire width of a parent element, like the columns element. To create custom columns with floats: 

  1. Add a div block on the canvas — this will be your wrapper
  2. Add 3 div blocks inside the wrapper
  3. Create a class on one of the 3 div blocks you just added
  4. Set a width of 33.33% and set float left
  5. Apply the same class to the other two div blocks

You can also use floats to shift an element to the left or right within a parent element. The process is the same as floating an image, described above.

Flexbox can accomplish all layout tasks listed above more easily and efficiently. Learn more about using flexbox.

Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback