▼
Streaming live at 10am (PST)

[SOLVED] Paragraph text not flowing properly around image

Design help General
#1

I have a couple of paragraphs of text that is part of a bio. I would like to have a portrait of the person floated to the right with the text flowing around it.

The image is placed first, the two paragraphs after that. Paragraphs have minimal styling (display: block; and margin-bottom: 24px;) that is inherited from the “all paragraphs” setting. The image has a width of 30%, is floated right, nothing else. Regardless, the first paragraph takes up the full height of the image, thus pushing the second paragraph down. Since the first paragraph is not long enough, I get an ugly whitespace instead of nice flowing text.

Any ideas as to why this is the case? In my book the settings i use should make the text flow naturally around the image. I even saw this question here on the forums in an old thread where this was the exact fix…?

#2

Hi @Cstalhem, check this post, it may be of some help :slight_smile: How to Wrap Text Around an Image Cheers, Dave

#3

Hey Dave, thanks for getting back!

I’ve actually looked at that post (twice…) and have not gotten it to wrap properly anyway. Its really weird. The imgage in question is on a page called “Biography” if you want to take a look, I’m probably just being stupid… :smile:

https://preview.webflow.com/preview/cinese?preview=d8c1fd46e44620f19b17ff8f9210fc3f

#4

Hi @Cstalhem, thanks for the update, sorry for my late reply. I would suggest combining those two paragraphs together :slight_smile: The image styles is OK :slight_smile: See my video: http://quick.as/rmqxtgxj1

I hope this helps, cheers, Dave :smile:

#5

Thanks for your input @cyberdave! I was thinking about doing that myself but the thing is that the site is going to be converted to a wordpress theme so I would really need it to flow properly, regardless of the length of the first two paragraphs.

The page in question is a template for a content type and so the paragraph length will vary from article to article but the idea is to keep the image in the same place and with the same size but reflect the artist that is being written about.

When I create a page manually in Sublime with the following styles:

img {
    float: right;
    width: 30%;
}
p {
    margin-bottom: 1.5rem;
    font-size: 21px;
    font-family: Garamond;
}

everything works perfectly with two separate paragraphs so I’m inclined to think that it is the way Webflow handles paragraphs and floats that may be the issue?

#7

I just figured it out!

The reason why the paragraph was spanning the entire height of the image is because I had a span in the paragraph called drop-cap (styling the first, large letter). The span was set to display: block; and float: left; and that messed the rest of the paragraph up. Not sure that this is the expected behaviour?

I sorted it out by adding a separate text-block with the same styling and removed the span. Once I did that, everything just fell into place nicely :smile:

#8

Hi @Cstalhem, that is awesome :slight_smile: Thanks for the update :slight_smile: Cheers, Dave

#9