Q: How keep blocks from flowing so that they truncate I only have raw html and css available. No additional frame works but that should be enough.
Printed invoices must have return and recipient addresses that show up in the clear envelope windows. What I have generally works when printed. However, if the user narrows the browser then the right hand blocks flow under the left hand blocks. What I want is for that to truncate. Yes, I know what I have is generally the desired effect. But the users assume that because the page items now display differently that they will print like that. I am tired of having to explain that printed and viewed are different.
I've attempted lots of different fiddles on the topic but none seem to work for me. Apparently I don't understand CSS well enough. I basically need 4 display areas that print in fixed locations in a 2x2 grid. The number of lines in each may vary**. The right hand items should truncate if the width would make it so that they don't display.
The items on the left must hit specific spots on the printed page so that the return and recipient addresses are visible in the envelop windows. And yes, [PracticeName] displays twice.
** Bonus points! Since I control the html generation, I can control the text, and since I know how many characters and lines will throw off the spacing, I simply truncate the text as required. However, if there is a way to make sure that each block could do this for me, I would be extremely grateful.
<html>
  <head>
    <style>
@page
{
    size:auto;margin:0;
}
footer
{
    page-break-before:always;
}
.EnvelopHeader
{
    padding-top:12pt;
}
.Address
{
    font:12Pt Arial;
    margin-top:48pt;
    margin-left:72pt;
    height:4em;
}
.left
{
    width:3.5in;
    float:left;
}
.right
{

}
    </style>
  </head>
  <body>
  <div class="EnvelopHeader">
    <div class="Address">
      <div class="left">
        <div>[PracticeName]</div>
        <div>[PracticeAddress1]</div>
        <div>[PracticeAddress2]</div>
        <div>[PracticeCityStateZip]</div>
      </div>
      <div class="right">
        <div>[PracticeName]</div>
        <div>[PracticePhoneNumber]</div>
      </div>
    </div>
    <div class="Address">
      <div class="left">
        <div>[PatientName]</div>
        <div>[PatientAddress1]</div>
        <div>[PatientAddress2]</div>
        <div>[PatientCityStateZip]</div>
      </div>
      <div class="right">
        <div>[PaymentReceipt]</div>
        <div>[PaymentDate]</div>
        <div>[PaymentType] #[ReferenceNumber]</div>
        <div>[PaymentAmount]</div>
      </div>
    </div>
    </div>
  </body>
</html>




A: Try to format it as a table only with CSS
<html>
    <head>
        <style>
            @page {
                size:auto;margin:0;
            }
            .EnvelopHeader {
                padding-top:12pt;
            }
            .Address {
                font:12Pt Arial;
                margin-top:48pt;
                margin-left:72pt;
                height:4em;
            }

            .table {
                display: table;
                border-collapse: collapse;
            }
            .tr {
                display: table-row;
            }
            .td {
                display: table-cell;
            }
        </style>
    </head>
    <body>
        <div class="EnvelopHeader table">
            <div class="tr">
                <div class="Address td">
                    <div>[PracticeName]</div>
                    <div>[PracticeAddress1]</div>
                    <div>[PracticeAddress2]</div>
                    <div>[PracticeCityStateZip]</div>
                </div>
                <div class="Address td">
                    <div>[PracticeName]</div>
                    <div>[PracticePhoneNumber]</div>
                </div>
            </div>
            <div class="tr">
                <div class="Address td">
                    <div>[PatientName]</div>
                    <div>[PatientAddress1]</div>
                    <div>[PatientAddress2]</div>
                    <div>[PatientCityStateZip]</div>
                </div>
                <div class="Address td">
                    <div>[PaymentReceipt]</div>
                    <div>[PaymentDate]</div>
                    <div>[PaymentType] #[ReferenceNumber]</div>
                    <div>[PaymentAmount]</div>
                </div>
            </div>
        </div>
    </body>
</html>

