NEW way of controlling text wrapped around images (not media queries...)

Hopefully the moderators will leave this as a seperate thread and not add it to the one I started yesterday that ended up discussing how to use media queries to control the amount of text wrapped next to an image. Please? :slight_smile:

This NEW method lets you control how many characters of text you want wrapped next to an image BEFORE it moves all the text BELOW the image. And it does not use media queries or a min-width rule.

But first, let me say that I did not invent this method. Gustav Andersson did and told about it in this article: http://css-tricks.com/minimum-paragraph-widths/ Unfortunately his code only worked for images on the right, and had a few other bugs when I tried it on my responsive Twitter Bootstrap site.

I changed Gustav’s code in two ways:

  1. changed the p:before { display:block; } to p:before { display:inline-block; }
  2. added the <br /> before the first word in the wrapping paragraph

I think this method will be most useful for responsive sites. On a fixed width site it probably isn’t needed.

You can see it live here: http://easydigging.com/Garden_Tool/method-2a.html
Best seen “in action” on a large screen where you can grab the edge and narrow the width to see it jump as the “probe” hits the image or box edge.

The “probe” is the dark green horizontal bar. It’s length can be set in the CSS. When your page is made public just remove the CSS that makes the probe green. It will still be there, but will be invisible. :smiley:

Questions for the Forum members:
A) Can you make it function properly without the <br /> before the first word in the wrapping paragraph?
B) How to make the height of the bordered box automatically be tall enough fit the image height without setting a specific min-height on the bordered box? (without the min-height the box is only tall enough for the text…)

Here is a sample of the HTML code:

<!-- Articles with Medium images -->
<div class="container-fluid" style=margin-top:10px; >
     <div class="row-fluid">
     <div class="span12">
	 <h4>Medium high images</h4>
	 <div class="row-fluid">
         <!-- first column -->
		 <div class="span6">
            <div class="article-boxed medium-image text-to-the-left" >
	          <img src="../images-new/trenching-hoe.jpg" alt="Trenching Hoe" />
			  <p><br />So all the different attachments are used in this video. Filming was done
			         in a long established garden with fine soil. A bit more effort may be
				 required in new gardens or harder soils, but all the same attachments
				 and methods can be used.
				 <strong>Has BREAK before 1st word in paragraph</strong>
			  </p>
		    </div>
		 </div>
		
		 <!-- second column -->
		 <div class="span6">
		    <div class="article-boxed medium-image text-to-the-left" >
	          <img src="../images-new/trenching-hoe.jpg" alt="Trenching Hoe" />
			  <p>So all the different attachments are used in this video. Filming was done
			         in a long established garden with fine soil. A bit more effort may be
				 required in new gardens or harder soils, but all the same attachments
				 and methods can be used.
			  </p>
		    </div>
		 </div>
	 </div>
</div>
</div>
</div>

And here are the CSS rules:

.article-boxed {
     border: solid 2px;
	 border-radius: 15px;
	 -moz-border-radius: 15px;
	 border-color: #C9D77B;
	 margin-bottom: 10px;
 	     }			 					

.tall-image { min-height: 340px; }
.medium-image { min-height: 280px; }
.short-image { min-height: 220px; }	

.tall-image img { height: 320px; margin: 10px; }
.medium-image img { height: 260px; margin: 10px; }
.short-image img { height: 200px; margin: 10px; }			

.text-to-the-left img { float: right; }	
.text-to-the-right img { float: left; }	

.text-to-the-left p:before {
     content: "";
     width: 10em;
     display: inline-block;
     overflow: hidden;
     /* For Demonstration */
     border: 1px solid green;
         }
		
.text-to-the-right p:before {
     content: "";
     width: 10em;
     display: inline-block;
     overflow: hidden;
     /* For Demonstration */
     border: 1px solid green;
         }	

Somebody messaged me to see if I could provide pictures of what I was talking about. Here are two screenshots with some notes I added in orange.

This one is roughly laptop width with the text still showing next to the images:

and this one is narrower (roughly tablet width) right after the “probe” touched the image and the text all jumped to below the image:

I hope that helps. Really the best way to see what this all means is to go to the sample page and play around with changing your screen width…