CODEWITHSUNDEEP
htmlcssimage
Martin
Martin

Reputation: 22760

CSS Is it possible to stop text block chunks wrapping around a floating block?

My issue is I have a page with numerous paragraph chunks, between 2 and 20 lines in height.

There can be any number of paragraphs, each of any height.

Using HTML5, CSS3,

My original objective was to add images into this format floating left and right, with the text wrapping around, this was easily done.

But now, the client wants the paragraphs THAT WRAP about the BASE OF THE IMAGE to keep in line, to try and example:

(ref. key below: ### = image space / shape / content)

SO: What HAPPENS is:

####### <p>text text here for this paragraph
###I### text here for this paragraph line 2
###M### text here for this paragraph line 3</p>
###A### 
###G### <p>text here for paragraph 2
###E### text here for paragraph 2, line 2, etc</p>
####### 
####### <p>text here for paragraph 3 line 1
text here for paragraph 3 line 2,
etc etc. </p>

...

BUT: What I want to achieve is a dynamic CSS way of doing:

####### <p>text text here for this paragraph
###I### text here for this paragraph line 2
###M### text here for this paragraph line 3</p>
###A### 
###G### <p>text here for paragraph 2
###E### text here for paragraph 2, line 2, etc</p>
####### 
####### <p>text here for paragraph 3 line 1
        text here for paragraph 3 line 2,
        etc etc.</p>

<p>text here for Paragraph 4 states not indented to 
make room text for the image floated left. text.
text text text text</p>

....

Because the P tag in paragraph 3 starts while the image is still present, the whole of the paragraph should be indented, is there a fairly dynamic way of achieving this?

If I apply any indent rules in CSS for the paragraph tags, they will also indent paragraphs like paragraph 4 which do not have a left hand side image.

If I make the Paragraph tag inline-Block which I read as a solution for another similar problem on SO, then the whole paragraphs dont appear until after the image, breaking the page flow.

If I don't float the image what is the best way of inlining it? I have no guarantee the number of images on the page.

I can not add spaces such as padding or margin to the bottom of the image figure element because I don't know how long the paragraphs will go on for.

TO FURTHER CLARIFY: My images are currently floated, and work perfectly.

Disclaimer: I'm somewhat tired. It's late. But I thought if this question had an easyish answer, it may be useful to others as well as myself, and would save me hours of digging tomorrow morning...

PS -> My inability of finding a solution maybe my inability to concisely describe my issue, if there are concise descriptions of this issue, let me know! Cheers.

Upvotes: 4

Views: 1216

Answers (1)

Marc Audet
Marc Audet

Reputation: 46785

If you add overflow: auto to the p elements, they will form new block formatting contexts and their content will be constrained to the edges of the bounding box of the paragraphs.

img {
  float: left;
}
p {
  width: 170px;
  overflow: auto;
  }
<img src="http://placehold.it/100x180">
 <p>text here for paragraph 3 line 1
    text here for paragraph 3 line 2,
    etc etc. </p>
 <p>text here for paragraph 3 line 1
    text here for paragraph 3 line 2,
    etc etc. </p>
 <p>text here for paragraph 3 line 1
    text here for paragraph 3 line 2,
    etc etc. </p>
 <p>text here for paragraph 3 line 1
    text here for paragraph 3 line 2,
    etc etc. </p>

Upvotes: 6

Related Questions