Forum How do I...?

Unusual page breaking with inline elements?

David J Prokopetz
Hi.

I have the following code:

@page cardpage
{
  size: US-Letter portrait;
  margin-top: 0.44cm;
  margin-bottom: 0.44cm;
  margin-left: 0.0cm;
  margin-right: 0.0cm;
}

cards
{
  page: cardpage;
  display: block;
  text-align: center;
  
  font-size: 0cm;
}

card
{
  display: inline-block;
  position: relative;
  
  width: 6.3cm;
  height: 8.8cm;

  margin: 0.05cm;  
  padding: 0.0cm;
  
  border: solid 0.06cm black;
  border-radius: 0.5cm;

  font-size: 0.3cm;
}

<cards>

  <card>Contents of card 1.</card>
  <card>Contents of card 2.</card>
  <card>Contents of card 3.</card>
  <card>Contents of card 4.</card>
  <card>Contents of card 5.</card>
  <card>Contents of card 6.</card>
  <card>Contents of card 7.</card>
  <card>Contents of card 8.</card>
  <card>Contents of card 9.</card>

</cards>

If I render this, I get nine cards on one page, as expected.

However, if I add a tenth card, instead of getting nine on one page and one on the next, as expected, I get six cards on the first page and four on the second.

I'm not quite sure what I'm doing wrong here. It appears as though the last row is getting dragged to the following page, but I can't figure out why.

Any ideas?

EDIT: Never mind, I think I have it - it didn't even occur to me that the parent element's orphans/widows property might default to something other than 1. False alarm, folks. :)