Hi,

I have the following:

<div id="report_section">
<div class="float_left">
  Some Information
</div>
<div class="float_right">
  More, longer information
</div>
</div>

I have the following css:

#report_section{
	clear:both;
	page-break-inside: avoid;
}

#report_section .float_left{
	vertical-align:top;
	width:12cm;
	float: left;
	display: block;

}

#report_section .float_right{
	vertical-align:top;
	width:7.5cm;
	float: right;
	display: inline-block;
}

Anytime i have information in the float_right section that goes longer than the page, it doesn't not carry over to the next page, but just stops, and the next page carries on with the next div. Is there something I am doing wrong? How can I get it to carry over to the next page?

Hopefully I have explained myself correctly. Thanks for your help!

Ryan

Try removing the "display: inline-block" on the right-hand float, as inline blocks cannot be split over multiple pages at present. You may also need to reduce the width of the two blocks unless your page is quite wide.