XF 2.2 Issue with articles and images

[DaveL]

Wondering if anyone can help.
I have a guide section on my forum, which when I upgraded I decided to turn it into an article forum The only issue is that the images are all over the place.
If you go to edit the post and have all the images down the left handside as it was before - It doesn't save like that and still looks like it does in the image below.
Any help would be greatly appreciated.

 

[DaveL]

Think it might be related to this https://xenforo.com/community/threads/indent-bb-code-out-of-control.186972/

However that has not received any replies yet.

 

[Mike]

That bug report won't be related.

I've managed to find the thread on your site and with the layout approach you were using, you were effectively depending on the height of the text to exceed that of the image, including any padding the image may have. The indent appears because the floated image hasn't been cleared yet. When you flipped to the article layout, the left column disappeared so that gave the text more with and thus may not take up as much vertical space. Additionally, I think 2.2 may have tweaked the amount of padding that floated images receive.

You could potentially add some additional line breaks, though that's unnecessary on smaller screeens so it might appear as extract white space. Otherwise, you need something to explicitly clear floats. In 2.2, horizontal rules and heading tags do this, so you could add an HR between each section (though that will have a visual component). If you want this to be totally hidden, then a custom BB code would be needed. Another option would be to flip to a table layout, though the table borders would be visible.

Beyond that, the options would to be shrink the images, write more text, or to use custom CSS to remove the padding from these images. But in all of these cases, the float clearing is essentially implicit based on the height of the image, so different scenarios could trigger something like this.