Wrap text around an image using float

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Wrap text around an image using float

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.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form