Flowing text with minimum column width around floated image

Question

I would like a way to prevent columns of flowing text from becoming too narrow. For example, in a column of HTML text, there is an image floated to the left. Text flows down the right-hand side of the column around the image, as expected:

However, if the image is almost as wide as the column, then the text ends up being very narrow:

In this case I want the text to simply not flow past the image, but to drop below it as if the image were a block:

I am trying to find a simple and general way of doing this. It's for a blog - I want to be able to add the image and text, maybe add a class or paste in a bit of markup (sigh), and have the flow work. I would prefer to do it with CSS and HTML only because it's hard to insert JavaScript to the blog posts. I have a couple of methods (see my answers) but neither is satisfactory. Can you do better?

Answer 1

When you set display: inline-block; to an element, the element will be flowed with surrounding content.

So you would need to add a line-break <br> to produce a line break in text, but the vertical space of the line will remains as you mentioned. [and one more thing happens is the horizontal scroll-bar which will appear if you decrease the width of the panel.]

Introduction

Using <table></table> element has a lot of benefits here.

When you use <table> element (as the following), it causes the content goes to the next line. And when the remain horizontal space gets lower than width of the <table>, it'll go to the next line and push the content down.

And also, horizontally scroll-bar won't appear in this case, because browsers won't display the <table> when it hasn't any element inside or any specific height or border properties.

(different browsers have different behavior, Mozilla Firefox doesn't display table element with a specific border property but Google Chrome does.)

HTML:

<img src="http://placehold.it/100x50" alt="">
<table></table>
Lorem ipsum dolor sit amet...

CSS:

img { float: left; }
table { width: 12em; }

Here is the JSBin Demo.

The Solution

As a pure CSS way, I used ::before pseudo-element to create a element which behaves like the <table> HTML element.

HTML:

<div>
  <img src="http://placehold.it/400x400" alt="">
  <p class="content">
    <!-- Here is the content... -->
  </p>
</div>

CSS:

img { float: left; }

.content:before {
  content: ' ';
  display: table;
  width: 10em;    /* <-- Change the current width size */
}

Here is the JSBin demo.

Answer 2

A better solution is to give every paragraph an invisible CSS pseudo-element with the desired minimum paragraph width. If there isn't enough space to fit this pseudo-element, then it will be pushed down underneath the image, taking the paragraph with it.

If the img is flot: right, add clear: left to the p:before.

And if the img is float: left, add clear: right to the p:before

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  clear: left;   //use clear:right if img is float:left
}