Wrapping text around an image

On the website I’m developing, I’m trying to get text to wrap around an image in both my Footer – Column 1 widget as well as in the main body of a page. But it’s not working. Here’s what I’ve done:

Using the WordPress interface, into the Footer – Column 1 section in Appearance > Widgets, I first tried putting an Image widget/element with my logo in it (assigned class “footer_logo1”), followed by a Text widget/element with some test text, which ultimately will contain our mission statement. In my Enfold Child’s theme, I then added to style.css:

#footer .flex_column:nth-child(1) img.footer_logo1 {
    float: left;
    margin: 0 20px 20px 0;
    border: 3px dotted white;
}

RESULT: The dotted white border (for testing purposes) rendered, but the text did not wrap.

I then added underneath an HTML Block widget/element with the following test code:

<div class="mission_container">
   <img width="108" height="128" src="..." class="footer_logo2">
   <p id="footer_mission">Our mission at ...</p>
</div>

In my Enfold Child’s theme, I then added to style.css:

#footer .flex_column:nth-child(1) img.footer_logo2 {
    float: left;
    margin: 0 20px 20px 0;
    border: 3px dotted orange;
}

RESULT: This time, both the dotted orange border (for testing purposes) and the text-wrapping rendered. Yippee!

However, because I’m building this site for my brother’s business, I’d rather keep things at the Content Management System higher-user-interface level as much as possible for non-programmer’s like him or other staff to maintain more easily, and not bury so much inside HTML code.

So, continuing my experiment, I thought I’d test wrapping text around an image in the main body of a page, taking it out of the strange world of the footer widgets, just to see if I can get that to work. I will eventually be needing that anyway once I get into putting content into this website’s pages. But I couldn’t get the text-wrapping to work with this either.

What I did was: into a 1/1 layout element (container) (assigned class “imgTextContainer”), I placed a test Image element followed by a test Text element, and then I added to style.css:

.imgTextContainer {
    padding-left: 200px;
    padding-right: 100px;
}
.imgTextContainer img {
    float: left;
    width: 500px;
    margin: 0 20px 20px 0;
    border: 2px solid pink;
}

RESULT: The dotted pink border (for testing purposes) rendered, but the text did not wrap. Sadness!

Can you please help.

Thanks,
Gary

• This topic was modified 2 years, 1 month ago by garysch37.