Forum How do I...?

Keeping float together with the following block

hsivonen
I have a bibliography implemented as an XHTML <dl> list. The symbolic name of each item is the <dt> and the bibliography data is in the <dd>.

I have the <dt> floating to the left to emulate the traditional BibTeX look. This works fine except when the one-line <dt> fits at the end of a page but the multiline <dd> does not.

Screenshot: http://hsivonen.iki.fi/screen/prince-float-page-break.png

The style looks like this:
dl.references dt {
float: left;
}
dl.references dd {
margin-left: 8em;
margin-bottom: 1em;
}

Adding page-break-after: avoid; to the <dt> has no effect. Adding page-break-before: avoid; to the <dd> makes Prince exhibit exceedingly weird and unacceptable page breaking behavior with occasionally only a single <dd> or <dt> appearing on a page.

Is there a way to force the floating <dt> onto the next page when Prince decides put the <dd> on the next page?
hsivonen
Looks like the problem can be mitigated by adding
orphans: 1;
to the dd, but then, obviously, the layout has one-line orphans, which is not very nice.
mikeday
It looks like the trouble with this is the float, which will take the <dt> out of the normal flow and probably interfere with the behaviour of page-break-after: avoid on that element. I'm not sure how best to work around this in Prince at the moment, other than by avoiding float on things that need to be kept together.