<div class="main">
<div class="Picture_Group">
<img src="Pictures/babook.gif" alt="alt picture info"></img><span class="Picture_Caption">picture caption</span></div>
<a class="Lemma" id="hvo30967">babook</a><span class="Part_Of_Speech" lang="es">s</span><span class="Definition" lang="es">mapache</span><span class="Example_Group"><span class="Example_Sentence" lang="stp">Mi dhɨr ji mɨɨ gu babook na pai tuut gu mansan. Giilhim mui iñxich gui na jɨk jix bhai, na gu cham mian jir kiicham.</span><span class="Example_Sentence" lang="es">El mapache corrió de allí donde están los manzanos. Tumbó muchas manzanas maduras porque nadie vive cerca.</span></span><span class="Variant_Group"><span class="Variant_Form">boppok</span></span>
</div>
I have a picture in float:right at bottom of page but caption goes to top of next column.
How do I avoid this?
I would like to use
.Picture_Group {break-inside: avoid)
.Picture_Group {
height: 1in ;
float: right ;
margin: 0 ;
padding: 1pt;
text-indent: 0pt;
}
.Picture_Caption {
display: block ;
text-align: center;
margin: -6pt 0 0 0 ;
padding: 0 0 0 0 ;
font-size: 70% ;
font-weight: bold ;
}
Jim Albright
Wycliffe Bible Translators