Forum How do I...?

keep picture and caption together

jim_albright
<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 mian 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

mikeday
How about using the column-break-inside property?