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?
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:
- changed the p:before { display:block; } to p:before { display:inline-block; }
- 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.
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;
}