I've been tearing my hair out trying to get this fixed. I can't figure out what's going wrong. It looks fine in the Visual Editor (though I usually use the text version instead - and NEVER use Gutenburg (so this is referencing the Classic Editor).

Images aligned left or right just do not properly wrap the text. I have added the following CSS to my stylesheet, and it makes no difference.

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

It wraps only with the paragraph it was added next to. But subsequent paragraphs do not continue the wrap. They start below the image, as seen in this screenshot:

Can anyone help me here?

I've been tearing my hair out trying to get this fixed. I can't figure out what's going wrong. It looks fine in the Visual Editor (though I usually use the text version instead - and NEVER use Gutenburg (so this is referencing the Classic Editor).

Images aligned left or right just do not properly wrap the text. I have added the following CSS to my stylesheet, and it makes no difference.

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

It wraps only with the paragraph it was added next to. But subsequent paragraphs do not continue the wrap. They start below the image, as seen in this screenshot:

Can anyone help me here?

• images

• Your issue may be with the paragraph css. Can you share a link? – Michelle Commented Jun 25, 2020 at 18:10
• Unfortunately I cannot. But this is the css for p p { margin-top: 0; margin-bottom: 1rem; } – Laura Sage Commented Jun 25, 2020 at 20:17
• We just need more context. I've reproduced your code in a CodePen here and it works: codepen.io/friendlywp/pen/abdwMew – Michelle Commented Jun 25, 2020 at 21:53
• Is it possible to provide a link via PM? I don't actually know how to do that here. – Laura Sage Commented Jun 25, 2020 at 22:07
• Ok, it doesn't appear that it's possible to send a PM or do a private comment, so I'll post the dev link to the particular page in question: [link]reason4rhymes.themedev.thepixelpixie/welcome-to-my-blog/[/… – Laura Sage Commented Jun 26, 2020 at 13:31

1 Answer 1

Your container div for the content area has a class of .row, which is set to display:flex in Bootstrap. Direct children of a parent with display:flex can't be floated.

To fix this you'll either need to update the .row class so it's not set to display:flex (display:block works for me), or add an interior wrapper div so that the image and paragraphs not direct children of the .row div.