Display is Messed Up on 2 Column Flex Table

HTML & CSS
1

This was a project of mine many months ago. I did some editing because I wanted to add a design spacer toward the bottom and somehow I threw the display of the table. The little design should be centered. Thanks for your help.

 <!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=Calistoga&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Chicle&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Diplomata&display=swap" rel=" stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ewert&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,100;&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=New+Rocker&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ribeye+Marrow&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;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">
  <link href="https://fonts.googleapis.com/css2?family=Sancreek&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Vast+Shadow&display=swap" rel="stylesheet">

  <title>2 FLEX COLUMNS w&#47;nth Child STRIPING &#9743; by semicodin with thanks to Paul O&rsquo;Brien of Sitepoint Forums</title>

  <style>
    /* lets use border box model so padding and borders are included inwidth*/
    html {
      box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    body {
      color: black;
      margin: .75rem 3% 2rem 3%;
      font-size: 1rem;
      line-height: 1;
      font-weight: 700;
      font-family: "Roboto Slab", sans-serif;
    }

.lead {
    color: blue;
    padding: 2.25rem 0 1rem 0;
    margin-bottom: 3rem;
    border-bottom: .5rem dotted black;
    background-color: white;
    text-align: center;
    font-family: 'solway', serif;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1;
}

.fancyamp {
    font-family: 'goudy bookletter 1911', serif;
}

.design {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 4rem 0 4rem 0;
    width: 750px;
    height: 250px;
}

    .crate {
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
    }

    .crate:first-of-type {
      /*  REMOVED    border-top: 8px groove cyan;   */
    }

    .crate:last-of-type {
      border-bottom: 8px groove cyan;
    }

    .colb .item:nth-child(odd) {
      background-color: white;
    }

    .colb .item:nth-child(even) {
      background-color: #ffffcc;
    }

    .crate:nth-child(even) .colb .item:nth-child(odd) {
      background-color: #ffffcc;
    }

    .crate:nth-child(even) .colb .item:nth-child(even) {
      background-color: #fff;
    }

    /* colors */
    .cola .item {
      background: #eafeff;
    }

    .header {
      margin: 0;
      display: flex;
      flex: 1 0 100%;
      min-width: 0;
      line-height: 1;
      font-weight: 700;
      font-size: 1rem;
      font-family: 'roboto slab';
      border: 8px groove cyan;
      /* REMOVED since I placed groove on the ENTIRE header border-top: 8px groove cyan;   */
    }

    .crate.header+.crate .item:first-child {
      border-top: 2px solid #000;
    }

    .colaheader,
    .colbheader {
      display: flex;
      flex-direction: column;
      margin: 0;
      min-width: 0;
      font-size: 1rem;
      text-align: center;
      text-shadow: 2px 2px #000;
      padding: .5rem;
      /* tweaked */
      background: #fff;
      /* was black */
    }

    /* new */
    .colaheader div,
    .colbheader div {
      background: #000;
      padding: .5rem;
      height: 100%;
    }

    .colaheader {
      min-height: 130px;
      flex: 1 0 54.4%;
      position: relative;
      justify-content: flex-end;
    }

    .colaheader div {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .colbheader {
      flex: 1 0 45%;
    }

    .colaheader+.colbheader {
      /*  how clever Dave!  */
      border-left: 8px groove cyan;
    }

    .colbheader {
      flex: 1 0 45%;
    }

    .crate.header:has(.colaheader + .colbheader)+.crate .item:first-child {
      border-top: 0px;
    }

    .cola {
      flex: 1 0 55%;
      max-width: 55%;
      word-wrap: break-word;
      border-left: 8px groove cyan;
      border-right: 1px solid #000;
    }

    .colb {
      flex: 1 0 45%;
      max-width: 45%;
      word-wrap: break-word;
      border-right: 8px groove cyan;
      border-left: 1px solid #000;
    }

    .cola,
    .colb {
      display: flex;
      flex-direction: column;
    }

    .item {
      line-height: 1;
      font-weight: 400;
      font-size: 1.5rem;
      padding: .31rem;
      border-bottom: 2px solid black;
      flex: 1 0 0;
      background: #ffffcc;
    }

    .crate:last-of-type .item:last-child {
      border-bottom: none;
    }

    /*  ━  ━  ━  ━  ━  ━  ━  ━  */
    /* just style the differences using an extra class*/
    .cal {
      font-family: 'calistoga'
    }

    .chi {
      font-family: 'chicle'
    }

    .cou7 {
      font-family: 'courier prime', monospace;
      font-weight: 700;
    }

    .cre {
      font-family: 'crete round'
    }

    .ewe {
      font-family: 'ewert', display;
      font-weight: 400;
    }

    .firab {
      font-family: 'fira sans condensed', sans-serif;
      font-weight: 800;
    }

    .firx4 {
      font-family: 'fira sans extra condensed', sans-serif;
      font-weight: 400;
    }

    .firx5 {
      font-family: 'fira sans extra condensed', sans-serif;
      font-weight: 500;
    }

    .firx6 {
      font-family: 'fira sans extra condensed', sans-serif;
      line-height: 1;
      font-weight: 600;
    }

    .firx7 {
      font-family: 'fira sans extra condensed', sans-serif;
      font-weight: 700;
    }

    .goudy {
      font-family: 'goudy bookletter 1911';
      font-weight: bold;
      line-height: 1.2;
    }

    .lono {
      font-family: 'londrina outline';
      line-height: 1.2;
    }

    .lons {
      font-family: 'londrina solid';
      line-height: 1.2;
    }

    .hen {
      font-family: 'henny penny';
      line-height: 1.5;
    }
    .henpen {
      color: black;
      margin: 1rem 0 0 0;
      font-family: 'henny penny';
      font-size: 2rem;
      line-height: 1.5;
    }

    .met {
      font-family: 'metal mania'
    }

    .new {
      font-family: 'new rocker'
    }

    .pla {
      font-family: 'playfair display';
      line-height: 1.2;
    }

    .rib {
      font-family: 'ribeye marrow';
      line-height: 1.2;
    }

    .rob {
      color: black;
      font-family: 'roboto slab';
    }

    .rob7 {
      font-family: 'roboto slab';
      font-weight: 700;
    }

    .san {
      font-family: 'sancreek'
    }

    .sol {
      font-family: 'solway';
      padding: .31rem;
    }

    .spe {
      font-family: 'special elite';
      padding: .44rem;
    }

    .unc {
      font-family: 'uncial antiqua'
    }

    .vas {
      font-family: 'vast shadow'
    }

    .dip {
      line-height: 1.75;
      font-weight: 500;
      font-size: .75rem;
      font-family: 'diplomata';
    }

    .blu {
      color: blue
    }

    .crim {
      color: crimson
    }

    .crimb {
      color: crimson;
      font-weight: bold;
    }

    .crimu {
      color: crimson;
      text-decoration: underline;
    }

    .ctext {
      color: cyan
    }

    .dblu {
      color: dodgerblue
    }

    .undr {
      text-decoration: underline
    }

    .hilite1 {
      color: #ffffdd
    }

    /*  used w/ */
    .hilite2 {
      color: #ffffcc
    }

    /*  use for text striping */
    .ytext {
      color: #ffffcc
    }

    /*  use for text on black bkg. */
    /*  #ffff80 is the boldest yellow (of my set). */
    .boldly {
      font-weight: bold
    }

    .plainly {
      font-weight: normal
    }

    /*  ━  ━  ━  ━  ━  ━  ━  ━  */
    .hfontk,
    .hfontc,
    .hfonty,
    .hfontw {
      text-align: center;
      line-height: 1;
      font-weight: 700;
      font-size: 1.5rem;
      font-family: 'roboto slab';
    }

    .hfontk {
      color: black
    }

    .hfontc {
      color: cyan
    }

    .hfonty {
      color: #ffff80
    }

    .hfontw {
      color: white
    }

    .subheader {
      color: cyan;
      text-align: center;
      background: white;
      /* was black */
      border-left: 8px groove cyan;
      border-right: 8px groove cyan;
      line-height: 1;
      font-weight: 400;
      font-size: 1.5rem;
      font-family: 'vast shadow';
      padding: .5rem;
      /* added */
    }

    /* new */
    .subheader * {
      background-color: black;
      padding: .5rem;
    }

    .subheader+.crate .item:first-child {
      border-top: 2px solid #000;
    }

.clamcr {
	color: crimson;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
}
.here {
    text-align: center;
    color: black;
    margin: 1rem 0 0 0;
    font-size: 2.25rem;
    line-height: 1.02;
    font-weight: 700;
    font-family: 'roboto slab', serif;
}
.thanks {
    text-align: center;
    font-family: 'courier prime', monospace;
    font-size: 0.75rem;
    line-height: 1.02;
    font-weight: bold;
    color: black;
}
.ques {
    margin: 1.75rem 4rem 2.25rem 4rem;
    text-align: center;
    color: black;
    font-size: 1.25rem;
    line-height: 1.02;
    font-weight: 700;
    font-family: 'roboto slab', serif;
}

a:active {color: teal}
a:hover {color: crimson}
a:link {color: crimson}
a:visited {color: teal}

    #counter {
      margin-top: 2.5rem;
      text-align: center;
      /* position: absolute; if vertically centering a graphic above */
      bottom: 0;
      max-width: 100%;
    }

/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/

</style>
</head>

<body>

<div class="lead">
2 Column Flex Table with<br>
nth Child <span class="fancyamp">&</span> &ldquo;Inset&rdquo; Framing<br>
in Column Header
<div class="henpen">
by semicodin</div>
</div>



  <div class="crate-wrapper">
    <div class="crate header">
      <div class="colaheader hfontc">
        <div>
          INQUIT,<br>
          NON SATISFACIT?
        </div>
      </div>

      <div class="colbheader hfontw">
        <div>EPICURI DIEM NATALEM, QUAM <br>ILLIUS<br>
          <span class="hfontc">CAVERE UT</span> <span class="hfonty">AGERETUR</span>
        </div>
      </div>

    </div> <!-- closing crate -->

<!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <div class="crate">
      <div class="cola">
        <div class="item rob7" style="border-top: 0">
          This is a sample of the (bolded) Google Font &ldquo;Roboto Slab,&rdquo; & a well-crafted serif &mdash; from Google  &mdash; that plays nice with other fonts
        </div> <!-- closing style -->
      </div> <!-- closing cola -->

      <div class="colb">
        <div class="item cal" style="border-top: 0">
          This is a sample of &ldquo;Calistoga,&rdquo; & a nice thick serif with fat dots on its lowercase i letter and handsome numericals: 
1234567890
        </div>

        <div class="item chi">
          This is a sample of &ldquo;Chicle,&rdquo; & a GROOVY font popularized in posters of Peter Max and others in the 1960&rsquo;s &ldquo;flower power,&rdquo; LSD, long hair, Go Go Boots, bell bottoms, and all things psychedelic baby. You dig? Or as Jimi would ask: Are you experienced?
        </div>

        <div class="item cre">
          This is a sample of the Google Font <b>&ldquo;Crete Round&rdquo; &amp;</b> &mdash; <i>shown here italicized.</i>

        </div> <!-- closing style -->
      </div> <!-- closing colb -->
    </div> <!-- closing crate -->

    <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <div class="crate">
      <div class="cola">
        <div class="item dip">
          This is a sample of the Google Font &ldquo;DIPLOMATA&rdquo; &ndash; & a formal display font used to emphasize authority and stability; found in banks &amp; financial institutions and on specie. <span class="crim">Needs generous letting (line height). 1234567890
        </span></div> <!-- closing style -->
      </div> <!-- closing cola -->

      <div class="colb">
        <div class="item sol">
          This is a sample of <b>&ldquo;Solway,&rdquo;</b> & a gentle serif with rounded tips and <span class="crim"><b>really lovely numericals: 1234567890</b></span>
        </div>

        <div class="item firx6">
          This is a sample of the (600 weight) Google Font &ldquo;Fira Sans Extra Condensed.&rdquo; <span class="firx4">
            & And here it is in what I consider a reasonably <i>normal</i> weight (400). The Fira font family <i>pulls heavy</i> so you&rsquo;ll need to get into really small numbers to render her normal. The 500 weight was too close to 600 to differentiate.</span>
        </div>

        <div class="item hen">
          This is a sample of the Google Font &ldquo;Henny Penny&rdquo; &ndash; & <b>a playful display font</b> by font developer &ldquo;brownfox&rdquo;

        </div> <!-- closing style -->
      </div> <!-- closing colb -->
    </div> <!-- closing crate -->

    <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <div class="subheader">
      <div>& VAST SHADOW!</div>
    </div>

    <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <div class="crate">
      <div class="cola">
        <div class="item met">
          This is a sample of the Google Font &ldquo;Metal Mania&rdquo; &ndash; & a Gothic font rendered in small caps, particularly suited to <b>SHAKESPEARE EXCERPTS</b> I have found.
        </div> <!-- closing style -->
      </div> <!-- closing cola -->

      <div class="colb">
        <div class="item new">
          This is a sample of the Google Font &ldquo;New Rocker,&rdquo; & a Gothic&#47;Black font with an impish sense of humor and a surprisingly readable clarity; well crafted! 1234567890
        </div>

        <div class="item rib">
          This is a sample of the Google Font &ldquo;Ribeye Marrow,&rdquo; <b>& a playful display font</b> used heavily in 1930s Greeting Cards.<br> By font developer Astigmatic
        </div>

        <div class="item cou7">
          This is a sample of the (bolded) Google Font &ldquo;Courier Prime&rdquo; &ndash; & a Monospace font developed by Mozilla!
        </div> <!-- closing style -->
      </div> <!-- closing colb -->
    </div> <!-- closing crate -->

    <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <div class="crate">
      <div class="cola">
        <div class="item spe">
          <b>This is a sample of &ldquo;Special Elite.&rdquo; & This is a distressed manual Typewriter</b>, frequently associated with the brands Underwood® and Royal®, <b>subjected to hourly abuse at the hands of its owner,</b> and powerless to give aid to its ribbon, struggling in a cloud of carcinogenic fumes and overflowing ashtrays
        </div> <!-- closing style -->
      </div> <!-- closing cola -->

      <div class="colb">
        <div class="item unc">
          This is a sample of &ldquo;Uncial Antiqua,&rdquo; &mdash; & very Celtic and very, <b>very</b> old. 1234567890
        </div>

        <div class="item vas">
          This is a sample of &ldquo;Vast Shadow&rdquo; &amp; with a nice little 3d effect
        </div> <!-- closing style -->
      </div> <!-- closing colb -->
    </div> <!-- closing crate -->

    <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <div class="subheader">
      <div>OLLY OLLY OXEN FREE</div>
    </div>

    <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <div class="crate">
      <div class="cola">
        <div class="item pla">
          <b>This is a sample of &ldquo;Playfair Display.&rdquo; This is an elegant serif from Claus Eggers Sørensen with a playful ampersand <span style="font-size: 2rem">&</span>.</b>
        </div> <!-- closing style -->
      </div> <!-- closing cola -->

      <div class="colb">
        <div class="item lono">
          <b>This is a sample of &ldquo;Londrina Outline,&rdquo; &mdash; & the companion outline font to Londrina Solid &mdash; a playful font</b>
        </div>

        <div class="item lons">
          This is a sample of &ldquo;Londrina Solid,&rdquo; & with total caveman vibes
        </div> <!-- closing style -->
      </div> <!-- closing colb -->
    </div> <!-- closing crate -->

    <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ -->
    <div class="crate">
      <div class="cola">
        <div class="item goudy">
          &ldquo;Goudy Bookletter 1911&rdquo; This is an elegant Goudy from Barry Schwartz with a lovely ampersand <span style="font-size: 2rem">&</span> (shown here enlarged) durable enough when bolded to work with most (bolded) serifs and even takes well to italicizing <span style="font-size: 2rem"><i>&!</i></span> Beware however: Goudy Bookletter 1911 has <span class="crim"><i>small caps numericals.</i></span>
        </div> <!-- closing style -->
      </div> <!-- closing cola -->

      <div class="colb">
        <div class="item ewe">
          This is a sample of &ldquo;Ewert,&rdquo; & a highly singular ALL CAPS, OPEN font associated with (US) &ldquo;Wild West&rdquo; posters of the era, Circuses and Saloons

        </div>

        <div class="item san">
          This is a sample of &ldquo;Sancreek,&rdquo; & a highly singular font associated with (US) &ldquo;Wild West&rdquo; posters of the era, Circuses and Saloons
        </div>

      </div> <!-- closing colb -->
    </div> <!-- closing crate -->
  </div><!-- end wrapper for all crates -->

<div class="design">
<img src="https://lh3.googleusercontent.com/pw/AP1GczPMwl4nzZke0eDHVgSesa8ts_HI7Rz96lvd9dPRvteLie93GubQrSKo_k4XloUV0-wkO3rXkxHYdKsKyw5gFnwIQe3seUXyP9IipMBNa0nhtlABlA=w250-h85" alt="">
</div>

<div class="here">
<a href="https://semicodin.nekoweb.org/vault/2_FLEX_COLS_W-nth_Child_01.ZIP" target="_blank">Code here.</a>
</div>

<div class="thanks"><br>
      This code courtesy of Paul O&rsquo;Brien<br>
      at the Sitepoint Forums
    </div>

<div class="ques">
Got Questions? You can PM me at<br>
<a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a><span class="clamcr">!</span>
</div>

</body>
</html>
2

The image is 250px wide but its containing <div> is 750px wide. A quick fix is to make the <div> 250px wide.

You do not need to have the image within a <div>. You can delete the <div> and use the class design for the <img>. The CSS for the <img> can then become:

.design {
    display: block;
    margin: 4rem auto;
}
1 Like
3

Thanks Archibald that worked great!

1 Like