Wrap text around an image

How To
1

Hello,
Can someone tell me how to wrap text around an image (or any element)? I know that you can use custom css like
root {
float: left;
}

Bricks Builder - wrap text around image
Bricks Builder - wrap text around image1901Ă—836 586 KB

but should be a native bricks way.

1 Like
2

Hi Carlos,

the float property is ignored in a flex container. And as Bricks containers are flex containers by default, there is no float setting.

Apart from that, float layouts are rarely if ever used nowadays. In your use case it makes sense to solve it this way, but honestly you are the first to ask for it.

Instead of filling the panel with little-used functions, you can create a simple .float-left (or float-right) class (Bricks > Settings > Custom CSS) and assign it to your elements when you want to use floats. This is by far the easiest solution from my point of view.

Best regards,
timmse

1 Like
3

Hi,
I didn’t know that wrap text around an image is an obsolete feature, because there are a lot of websites using it and seems to be a nice thing, even still a native wordpress feature in the last 5.9 version of block editor.
Thanks

1 Like
4

I’d be interested in this too. Is it possible to do a simple example for me to copy? Thx.

5

Hello,
Take a look to the image I put before, in the structure at the right you can see the container, if you make something like that you should make sure the display property of the container is set to block, the image should have a custom css like
root {
float: left;
}
then if you add a text element inside the container the text will wrap around the image.
Sorry, I cannot explain better because my natal language is not English.

6

Hi Tony, here is a simple template: Dropbox - template-wrap-text-around-image-2022-02-01.json - Simplify your life

7

Many, many thanks. Will give it a try!. T

8

Hi Timmse, I tried it but couldn’t get it to wrap. 1.3.7. in use. Result was simply the image (whatever height/width) on line above text but no wrap/float. Do I have some settings wrong I wonder? T

9

Hi. Played around and changed css to img { float: left; } and worked perfectly. Thanks. T

2 Likes
10

Create a Container, make sure it is “display :block”.
Put a Div inside the Container.
Put your image inside the Div, set width of image, set div width, include any padding in Div width.
The internal Div should have a float:(left/right).

Both containers should be display:block, “float” won’t work with “flex”.
Not sure why float got pushed under the rug, I use it all the time, responsive and saves space.

1 Like