Situation:
I have a fixed image in my template that overflows the content. Because it’s fixed, sometimes the image overflows text. Is there a method that fixes this and makes the text go around the image, as if it is float-ing inside the content div.
See the html-example.
CSS answer is preferred, Javscript/jQuery answers are acceptable.
Some extra details:
- The content is random. It can be long, short, contain images and have html.
- The
#cloudhas to stay on the same position with any content.
The issue isn’t visible on the live website anymore, because it’s solved by putting #cloud in a lower z-index layer.
What you are looking for is called CSS Exclusions and Shapes. This is relatively new and not widely supported by browsers. You might also be interested in this great article on CSS Exclusions.