"How do I make my bullet lists wrap around images?"

Old brick wall with a small, arched, cobweb-covered window.
Let's wrap this right up, shall we?

By default images added in your body content's WYSIWYG are set to keep images and bullet lists separate since, historically, these two elements don't play nice together. We recommend only one particular workaround for the right-floated images as the left-floated images usually wind up overlapping the bullets and/or text. Even though this conflict exists, we have a workaround to help you achieve your goal.

Creating a right-floated text wrap

Example

  • Stats iconFar far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
  • Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
  • A small river named Duden flows by their place and supplies it with the necessary regelialia.
  • It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
  • Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
  • The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
  • She packed her seven versalia, put her initial into the belt and made herself on the way.
  • When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.
  • Pityful a rethoric question ran over her cheek, then
Create your right-floated textwrap
  1. I created my bullet list first.
  2. Then I placed my arrow insertion point at the very beginning of the first bullet in the list.
  3. I added an image from my local computer and made sure to configure it to be set to align right and clicked the Save button.
  4. After a little manual resizing, I have the list/image balance I'm after with a functioning textwrap effect.

 

Issues with the left-floated image and list

This is the default behavior you'll see exhibited by your site if you use a left-floated image next to a list. Our lead developer spent a few days attempting to resolve the conflict between left and right floats to give everyone the best possible layout, but in the end, he determined that he couldn't make one wrap work without sacrificing the fix he had created for the other wrap.

Default behavior example

cut

  • Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
  • Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
  • A small river named Duden flows by their place and supplies it with the necessary regelialia.
  • It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
  • Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
  • The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
  • She packed her seven versalia, put her initial into the belt and made herself on the way.

Left-float list wrap example

This shows how the image will overlay the bullet points or list numbers. We strongly recommend not using a left-aligned image with your lists; if an image needs to be associated with a list, far better for it to be floated on the right.

  • cutFar far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
  • Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
  • A small river named Duden flows by their place and supplies it with the necessary regelialia.
  • It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
  • Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
  • The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
  • She packed her seven versalia, put her initial into the belt and made herself on the way.

Is there any alternative?

Within the default SiteFarm offering? No, as this arrangement ensures a base-level adherence to best user experience and visual appearance of content on our sites, especially for people who expect the service to "just work". That said, if you have the skillsets necessary, you have the option to explore creating a subtheme with your own classes to overwrite the output in the display.

Category

Tags