Floating Images
Place an image to the left or right so that text flows around it.
Syntax
First, insert your image as normal:
Then, on the very next line (no blank line between them), add the float direction:
{float-left}or
{float-right}Full example:
{float-left}
Our team has been serving the community since 2005. We are a dedicated group of professionals committed to making a difference in the lives of those we serve.Examples
Image floating left, text on the right
Type this in Contentful:
{float-left}
Our summer program welcomes students from all backgrounds. Over the past decade, we have helped thousands of young people discover their potential and develop lasting friendships.What you’ll see: The image sits on the left side of the page and the text flows to the right of it, wrapping around the image as the text continues.
Image floating right, text on the left
Type this in Contentful:
{float-right}
This year we were proud to receive the Community Excellence Award. The recognition reflects the hard work of our entire team and the trust our community places in us.What you’ll see: The image sits on the right and the text flows on the left side around it.
Controlling image size with a float
You can combine floating with image sizing by adding a size keyword to the alt text:
Type this in Contentful:
{float-left}
Jane Smith has been our director since 2018.What you’ll see: A medium-sized image floated left with text beside it. See Images for all available size keywords.
Options / Variations
| Syntax | Effect |
|---|---|
{float-left} | Image sits on the left, text wraps on the right |
{float-right} | Image sits on the right, text wraps on the left |
Tips
- Float works best with a paragraph of text next to the image — if the text is very short, it may look unbalanced.
- You can control the image size using size keywords in the alt text (e.g.,
alt-medium). See the Images page for details. - On mobile devices, floated images typically stack above the text rather than floating beside it.
Common Mistakes
Blank line between the image and the float marker
Wrong:
{float-left}Right:
{float-left}The {float-left} or {float-right} must be on the line immediately after the image, with no blank line between them.
Misspelling the float direction
Wrong: {floatleft} or {float left} or {left-float}
Right: {float-left} or {float-right}
Must be exactly {float-left} or {float-right} — with a hyphen, no spaces, inside curly braces.
No text after the float
If you add a float but there’s no text immediately after the image, the float has nothing to wrap around and may leave an awkward gap. Always follow a floated image with a paragraph of text.