“Postcard-Style” Label Sheets Float w/@Media

Hi guys. Be sure to look at my graphic, below. The concept here is that I’m creating a PDF sheet of labels that I can print to paper and cut with a paper cutter and/or scissors, ending up with little paper “labels” that fit onto a standard US Business No. 10 Envelope (the kind you fold a sheet of paper to 1/3 and slip into the envelope) – these, defined as much by what they are not: shipping labels.

Each of the rows in this float are producing a little “Postcard-like” style of 3 label “sets”-per-row: on the left is my Return Address block, on the right is the Addressee block, and dividing the two is the vertical line you typically see on a postcard which ideally will stretch from the top of the sheet of paper all the way to the bottom: a printer’s “full bleed” effect (or as close to it as possible).

The content in each of the 6 columns must be vertically aligned to the top of their row. So, regardless of how different the return data appears (smaller font, lighter font weight, greyscale) the top of the word FROM has got to line up with the top of the word TO on every row.

The Return data is in a smaller font size and in greyscale, to direct the eye to the Addressee block which is a larger, bolder font size. There are the standard TO: and FROM: headings. And that’s about it. I tried it on doing this as Flex but everything about Flex was wrong for my taste (for this one project) and I finally realized what I really wanted was a good old-fashioned FLOAT.

It took some experimenting but I got as far as the code I am inserting below. What is happening is one of those outcomes that probably amounts to a word or two in the stylesheet, but without it the whole design breaks:

First let’s take a step back and consider the concept. We’re going to have (largely) repeating blocks of text that “hang from” the top of every row. The three FROM blocks of text – COLUMN-A – will need a narrower width than the TO blocks – COLUMN-B.

I could tell you what those respective widths would be if I could ever see the damn page display correctly! Wtf is going on with COLUMN-A? lol That is why I am here.

If you look at my graphic you can get a rough idea of their two widths (40/60? something like that). So if someone would kindly help me set up the column widths – taking into consideration left & right margins + a larger (than I’ve got) margin between the TO: block and its Vertical line – I would greatly appreciate it.

I should warn you that I haven’t gotten around to coding the SCREEN version of this. When you open this code up in your browser it will look hideous. Sorry! You’ll need to fly blind until you print it to a PDF. Just disregard the browser window. Here we go:

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<TITLE>FLOAT&para; POSTCARD LABEL SHEET &#7172; VIEWPORT + &#x40;MEDIA by semicodin</TITLE>

<STYLE>

* {
        margin: 0;
        padding: 0;
}
*, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}
BODY {
        margin: 30px 2% 30px 2%;
        width: 96%;
        font-size: 16px; 
        line-height: 17px;
        font-weight: 500;
        font-family: 'Roboto', SANS-SERIF;
}
.POSTCARDS {        /* THE ROWS */
        display: table;
}
.COLUMN-A {
        width: 12%;
        display: table-cell;z

        vertical-align: top;
/*        height: 100%;        */
        float: left;
}
.COLUMN-B {
        width: 20%;
        display: table-cell;
        vertical-align: top;
        border-left: 1px SOLID BLACK;
/*        height: 100%;        */
        float: none;
}

/* ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━ */
@MEDIA PRINT {
        html, body {
        width: 215.9mm;
        height: 280.67mm;        /* tricking the browser, normally 279.4mm;  */
}
@PAGE {
        size: 8.5in 11.05in;
        margin: 0px 0px 0px 0px;
}
/* ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━ */
.LFROM {
        margin-bottom: 5px;
        color: CRIMSON;      /* Restore to #666666 after troubleshooting */
        font-size: 12px;
        line-height: 13px;
        font-weight: 700;
        font-family: 'Roboto', SANS-SERIF;
}
.FROM1, .FROM2 {
        font-size: 10px;
        line-height: 11px;
}
.FROM1 {
        color: #777777;
        font-weight: 500;
        font-family: 'Roboto Condensed', SANS-SERIF;
}
.FROM2 {
        color: #999999;
        font-weight: 500;
        font-family: 'Roboto Condensed', SANS-SERIF;
}
/* ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━  ━ */
.LTO {
        margin-left: 2%;
        margin-top: 0px;
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 13px;
        color: BLACK;
        font-weight: 900;
        font-family: 'Roboto', SANS-SERIF;
}
.TO10-9 {
        margin-left: 2%;
        font-size: 10px;
        line-height: 11px;
        color: BLACK;
        font-weight: 700;
        font-family: 'Roboto', SANS-SERIF;
}
}        /* REQUIRED FOR THE @MEDIA TAGS */
</STYLE>
</HEAD>

<BODY>

<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ROW 1-->
<div class="POSTCARDS">

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 1A
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 1B
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 1C
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

</DIV>          <!-- ENDING ROW 1 -->

<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ROW 2 -->
<div class="POSTCARDS">

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 2A
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 2B
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 2C
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

</DIV>          <!-- ENDING ROW 2 -->
<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ROW 3 -->
<div class="POSTCARDS">

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 3A
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 3B
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 3C
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

</DIV>          <!-- ENDING ROW 3 -->

<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ROW 4 -->
<div class="POSTCARDS">

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 4A
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 4B
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 4C
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

</DIV>          <!-- ENDING ROW 4 -->

<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ROW 5 -->
<div class="POSTCARDS">

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 5A
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 5B
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ A -->
<div class="COLUMN-A">
          <div class="LFROM">
FROM: ROW 5C
          </div>
          <div class="FROM1">
RETURN1<BR>
RETURN2</div>
          <div class="FROM2">
RETURN3<BR>
RETURN4<BR>
RETURN5</div></DIV>

<!-- ▬▬▬▬▬▬▬▬▬▬ B -->
<div class="COLUMN-B">
          <div class="LTO">
TO:
          </div>
          <div class="TO10-9">
ADDRESSEE 1<BR>
ADDRESSEE 2<BR>
ADDRESSEE 3<BR>
ADDRESSEE 4</div></DIV>

</DIV>          <!-- ENDING ROW 5 -->

</BODY>
</HTML>

THE DASH MARKS ARE ONLY AS A VISUAL AID, PLEASE DON’T CODE THEM (or the blue gutters)!

I may be missing something, but isn’t this a job for a word processor?

2 Likes

I was thinking much the same. I’ve set up a number of similar documents in LibreOffice without much problem. It would seem to be a safer approach than using HTML/CSS, if they are required to print exactly. As Paul said elsewhere,

2 Likes

BTW, your code above has a stray “z”, which may or may not be causing problems.

.COLUMN-A {
        width: 12%;
        display: table-cell;z

        vertical-align: top;
/*        height: 100%;        */
        float: left;
}
1 Like

[quote=“Gandalf, post:2, topic:389056”]
isn’t this a job for a word processor?[/quote]

In another world it likely is. :sunglasses:

1 Like

Thanks Tbear, got it in one! :woozy_face:

Ignoring the fact that this is really a word processor task as already mentioned you would be better off using css grid instead of that hybrid table and float you are using at the moment.

Indeed the float property is doing nothing other than shrinking the width to practically nothing and allowing only one word a line. You would have seen that straight away if you had used real content.:slight_smile:

Screen Shot 2022-06-19 at 17.46.14

I suggest a simpler grid approach and simpler code all around.

This produces the following printout for me.

Which is much closer to the example drawing you posted than your layout produces on my printer.

Note you are still using height:100% when I have explicitly said a number of times that it is rarely needed and is likely to cause you problems if you keep doing so. Luckily it has zero effect on your layout because you can’t use height:100% without an unbroken chain of heights back to root (or if you are in a grid or flexbox).

Try to use lower case for all your styles and html as it makes it so much easier to read and to manage and to spot mistakes. You can use camelCase for classes etc for long class names but I prefer hyphens for class-names.

3 Likes

MAESTRO! I am honored to see you in this @Media-ish thread. If there is one thing the two of us agree upon it is that printing a web page is like abandoning it to a pitching sea of chaos! What a royal pain-in-the-ass this is, eh? I only wanted to explain that whenever you see me sticking something as provocative as height: into my code it is because I have given up trying to get it to work and am waving the white flag of HELP! I again thank Tbear for spotting that lurking z and while I have already printed out a sheet of FLOAT I will absolutely return to my thread to study – deeply – what amounts to my first experience of GRID

—s

1 Like

Paul, since GRID is an alien planet for me and they probably matter, just an initial few questions you can reply to at your leisure:

Was there a reason for placing the vertical postcard line to the right of my FROM data instead of (my original method of) to-the-left-of TO? I’m not being provocative, just trying to understand; I know absolutely nothing about GRID and I know you do everything in coding for a very specific reason that should never be taken for granted.

And following on that . . .

  1. Where exactly is the margin/padding measurement for the LINE being set in your CSS (all places please if more than one); and
  2. How might we safely increase its horizontal margin/padding so it isn’t quite so close to the content in TO (not a huge amount, just a bit)?

Having a crowded week here so it might be a few days before I can seriously dive back into the thread, apologies Paul and thank you again.

1 Like

Sorry again Paul, would you mind reproducing your code inline here? I’m in a drs. appt trying to extract it while I wait for him but Codepen’s iframe crap is interfering with my ability to get the thing whole. Thanks.

And man what a beautiful output!

This is from the codepen panels so is just the html within the body tags (codepen does seem a bit slow today).

<div class="labels">
  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1 with longer text to wrap<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1 with longer text to wrap<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1 with longer text to wrap<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1 with longer text to wrap<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1 with longer text to wrap<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

  <div class="card">
    <p class="from">From:</p>
    <div class="address">
      Return 1<br>
      Return 2<br>
      Return 3<br>
      Return 4<br>
      Return 5
    </div>
  </div><!-- end card -->
  <div class="card">
    <p class="to">To</p>
    <div class="address">
      Addressee 1<br>
      Addressee 2<br>
      Addressee 3<br>
      Addressee 4
    </div>
  </div><!-- end card -->

</div><!-- end labels div -->

CSS:

* {
  margin: 0;
  padding: 0;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  padding: 30px 2%;
  font-size: 1rem;
  line-height: 1.1;
}

.labels {
  display: grid;
  grid-template-columns: repeat(3, 0.7fr 1fr);
}
.card {
  /*background:#f9f9f9;*/
  padding: 5px 5px 15px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
}
.card:nth-child(odd) {
  /*background:#eee;*/
  color: #999;
  border-right: 1px solid #000;
}
.card:nth-child(even) {
  padding-right: 16px;
}
.card p {
  font-size: 12px;
  margin: 0 0 8px;
}
.card:nth-child(odd) p {
  color: red;
  font-size: 11px;
}

@media print {
  @page {
    size: 8.5in 11.05in;
    margin: 0px 0px 0px 0px;
  }
}
1 Like

Thank you Paul. I put this in my “Strictly Paul” folder! I’ll flesh out the code and return to see if anyone answered my questions (above).

Sorry I missed these questions somehow. :slight_smile:

In this case it doesn’t matter. It could be a right border on the odd numbered elements or a left border on the even numbered elements.

The line is a 1px border on the left side of the element.

.card:nth-child(even) {
padding-right: 16px;
border-left: 1px solid #000;
}

It’s height will match the tallest height of the content in any ‘cell’. I gave it an extra bit of padding on the right because it looked better.

As just mentioned the space is just padding on the element called .card.

The main rule is here:

.card {
  padding: 5px 5px 15px;
}

That gives 5px left and right padding (but the even numbered item has 16px padding as already mentioned).

More space can be made by increasing the horizontal padding in those two rules.

You could actually just remove the 16px padding from that second rule if you wanted matching space from the black line and just do it on the first rule.

e.g.

.card {
  padding: 5px 16px 15px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
}

.card:nth-child(even) {
  /*padding-right: 16px; not needed now*/
  border-left: 1px solid #000;
}

There isn’t much more to it as there are only a few lines of css. That’s the beauty of grid.:slight_smile:

The initial grid columns are created here.

grid-template-columns: repeat(3, 0.7fr 1fr);

That says repeat 3 pairs of columns across with the first of each pair being .7fr wide and the second item in the pair being 1fr wide.

The fr unit basically means ‘a fraction of’. If they were both 1fr then they would both take up the same amount of space but I made one 30% smaller (.7fr) than the other as that seemed right.

If you had 10 items across and they were all 1fr then the grid would make them all the same size. It just means make each one the same fraction (1fr) of the available space. It’s a way of ‘sizing without sizing’. Or as Bruce Lee said the “art of fighting without fighting” :slight_smile:

1 Like

You rock Paul. I can’t thank you enough. I tried er, modifying the appearance of your code and it wouldn’t render (well surprise surprise lmao) so this time I’m just gonna suck it in and take one for The Team: exactly Paul; only Paul; pure, 100% Malt Paul. Anticipate questions. :woozy_face:

Okay I’m gonna take a stab in the dark and guess atching space is not a reference to Kapampangan Cuisine. Peradventure . . . matching? :sunglasses:

Paul wrote:
In this case it doesn’t matter. It could be a right border on the odd numbered elements or a left border on the even numbered elements.
━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━

I think your style is both more intuitive and logical as I study it: The Return Address is a constant; the line is a constant; but the Addressee will change and we’ll just keep him at an arm’s distance from that line (it’s a little thing but I notice these little things). To the right of RETURN it is.

.labels
  display: grid;
  grid-template-columns: repeat(3, 0.7fr 1fr);
}

Should there be a bracket { after .labels? Corrected it and it validates.

Edit: Before I forget Paul, I’m getting a huge margin on the top of the PDF that I don’t want. I don’t know where it’s coming from. I go to such extremes to set everything to zero to avoid MARGIN CREEP since this is a print job but it’s showing up at the top of the page. It looks to be about an inch sigh. All help appreciated.

Original resumed . . .
Had a long reply when the code broke but examined it again and spotted yet another typo! You have no idea what a misery coding is on a phone Paul! Just accidentally touch/bump the screen and it quietly deposits these little (what I call) Alpha Bombs: random key entries that can range from a single letter . . . to the most recent content of your PASTE bin. It’s misery! Endless misery. Let me have a look. With my surgeon all day tomorrow so might be Tuesday.

Yes it should be like this (and is like this in my demo).

.labels {
  display: grid;
  grid-template-columns: repeat(3, 0.7fr 1fr);
}