Trouble getting two flex columns in equal widths

HTML & CSS
1

Hi everyone, been awhile eh? I have a simple inventory list that doesn’t render its two columns in equal widths. I tidied the code and verified in W3’s Validator. Here it is and thank you in advance for your help.

Codepen here https://codepen.io/semicodin/pen/poGqgdv
and code below.

—semicodin


<!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=solway:wght@300;400;500;700;800&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=calistoga&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=encode+sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=encode+sans+semi+condensed:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=encode+sans+condensed:wght@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=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=courier+prime:ital,wght@0,400;0,700;1,400;1,700&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=sancreek&display=swap" rel="stylesheet">

<title>inventory &#7172; december 4, 2023</title>

<style>

html, body {
        text-size-adjust: 100%;
        font-size: 18px; /* factor expressed in px setting the basis for rem */
        line-height: 18px; /* factor expressed in px setting the basis for rem */
}
body {
        margin: .94rem 0 0; /* 40px */
        padding: 0;
        width: 100%;
        font-size: 1.5rem; /*   18px     */
        line-height: 1;
        font-weight: 600;
        font-family: "encode sans semi condensed", sans-serif;
}
p {
        font-size: 0.8px;
        line-height: 0.8;
}
.bmar {
        margin-bottom: 3.13rem;
}
#twocolumns {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 96%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 3.13rem;
}
#column-a {
        display: flex;
        flex-direction: column;
}
#column-b {
        width: 48%;
}
.centr {
        text-align: center;
        margin-top: 0.63rem;
        margin-bottom: 0.63rem;
}
.undr {
       text-decoration: underline;
}
.alpha {
        font-family: "crete round", serif;
}
.alphard {
        color: crimson;
        font-family: "crete round", serif;
}
.hilite2 {
        text-align: center;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        color: black;
        background: #ffffbf;
        font-size: 1.13rem; /*   18px   */
        line-height: 1;
        font-family: "crete round", serif;
}
.hilite3 {
        text-align: left;
        color: black;
        background: #ffffbf;
        font-weight: bold;
        font-size: 1.13rem; /*   18px   */
        line-height: 1.05;
        font-family: "kiwi maru", serif;
}
.hilite4 {
        text-align: left;
        color: black;
        font-weight: bold;
        background: #ffdddd; /*  crimson hiliting  */
        font-size: 1.13rem; /*   18px   */
        line-height: 1.05;
        font-family: "encode sans semi condensed", sans-serif;
}
.hilite5 {
        text-align: left;
        color: black;
        background: #ffdddd; /*  crimson hiliting  */
        font-style: italic;
        font-weight: 800;
        font-size: 1.5rem; /*   28px   */
        line-height: 1.05;
        font-family: "encode sans semi condensed", sans-serif;
}
.hilite6 {
        text-align: center;
        color: black;
        background: #ffffbf; /* yellow hiliting  */
        font-size: 1.19rem; /*   19px   */
        line-height: 1.05;
        font-family: "crete round", serif;
}
.curly7 {
        font-size: 1.13rem; /* 18px */
        line-height: 1.05;
        font-weight: 700;
        font-family: "playfair display", sans-serif;
}
.curly9 {
        font-size: 1.13rem; /* 18px */
        line-height: 1.05;
        font-weight: 900;
        font-family: "playfair display", sans-serif;
}
.tools {
        text-align: center;
        color: black;
        text-align: left;
        font-size: 1.25rem;
        line-height: 1.05;
        font-weight: 900;
        font-family: "crete round", serif;
}
.dblu {
        color: dodgerblue;
}
.crim {
        color: crimson;
}
.crimu {
        color: crimson;
        text-decoration: underline;
        font-weight: bold;
}
.cntr {
        text-align: center;
}
.hvybk {
        color: black;
        text-align: left;
        font-size: 1.13rem; /* 18px */
        line-height: 1.05;
        font-weight: 600;
        font-family: "calistoga", serif;
}
.hvyrd {
        color: crimson;
        text-align: left;
        font-size: 1.13rem; /* 18px */
        line-height: 1.05;
        font-weight: 600;
        font-family: "calistoga", serif;
}
.hvybu {
        color: dodgerblue;
        text-align: left;
        font-size: 1.13rem; /* 18px */
        line-height: 1.05;
        font-weight: 600;
        font-family: "calistoga", serif;
}
.headingc {
        color: #888888;
        margin-top: 10px;
        text-align: center;
        font-size: 1.75rem;
        line-height: 1.05;
        font-family: "crete round", serif;
}
ol, dl, p {
        margin-left: 1%;
        font-size: 1.13rem; /*   18px   */
        line-height: 1.05;
        font-family: "encode sans semi condensed", sans-serif;
}
ul {
        list-style-type: square;
        font-size: 1.13rem; /*   18px   */
        line-height: 1.05;
        font-family: "crete round", serif;
}
</style>
</head>

<body>

<div class="headingc">inventory<br>
<span style="color: crimson">december 4, 2023</span>
</div>

<div id="twocolumns">
<div id="column-a">

<ol>
<li>furniture — extremely valuable inlaid mahogany furniture from no. carolina which i had purchased after seeing some of the pieces in an <i>architectural digest</i> magazine in 1988 (<span class="hvybu">$12,000 . . . </span><span class="hvyrd">35 years ago</span>); 7’ highboy, two lowboys
</li>
<li>furniture — extremely valuable solid chinese mahogany furniture w&#47;burled walnut inlay (<span class="hvybu">$4,000&nbsp;.&nbsp;.&nbsp;. </span><span class="hvyrd">35 years ago</span>); 40” inlaid coffee table, 66” sofa table, inlaid sofa side table, inlaid chest 2 doors
</li>
<li>&ldquo;barrister&rdquo; bookcases &ndash; two small 4-shelf glassed-in, cherry
</li>
<li>&ldquo;barrister&rdquo; bookcases &ndash; two large 4-shelf glassed-in, walnut
</li>
<li>chairs — four solid oak
</li>

<li>bookcases &ndash; two white kitchen double-door 60” high w&#47;maple tops
</li>
<li>one solid wood 12-drawer cabinet w&#47;brass hardware
</li>
<li>smartphone lg stylo 4 w&#47;540 gb supermicro card &ndash; android oreo 8.1
</li>
<li>gun case, blue, 3 removeable shelves
</li>
<li>pine crates on wheels &ndash; four handmade <span class="curly9">&amp;</span> shellacked 24&rdquo; x 15&rdquo; x 15&rdquo;
</li>
<li>sony home theatre amplifier
</li>
<li>boston&reg; home theatre 4-speaker system
</li>
<li>dvd movies <span class="curly9">&amp;</span> numerous box sets lotr, twilight zone definitive, rogers <span class="curly9">&amp;</span> hammerstein musicals, elizabeth r, sherlock holmes
</li>
<li>chatham™ emerald <span class="curly9">&amp;</span> gold ring w&#47;5 diamonds (<span class="hvybk">$3,000 . . . </span><span class="hvyrd">45 years ago</span>)
<li>fresh water pearl <span class="curly9">&amp;</span> diamond gold necklace (<span class="hvybk">$1,800 . . . </span><span class="hvyrd">45 years ago</span>)
</li>
<li>antique garnet <span class="curly7">&amp;</span> diamond brooches (2) <span class="curly9">&amp;</span> bracelet (1) &ndash; all garnet gemstones with diamonds
</li>
<li>rare books
</li>

</ol>

<ol start="18">
<li>dozens of dvds containing backup files, many with sensitive pw and acct. data
</li>
<li>lenovo&reg; tablet &ndash; android honeycomb 3.2
</li>
<li>two desktop computers
</li>
<li>seven hard disk drives
</li>
<li>monitor, nec 22&rdquo; pivoting lcd
</li>
<li>flatbed scanner 14&rdquo;
</li>
<li>scale 25-lb. digital
</li>
<li>upwards of 30 business software licenses
</li>
<li>fellowes&reg; commercial paper shredder
</li>
<li>vacuum cleaner, dyson animal ($500)
</li>
<li>vacuum cleaner, bissell rewind
</li>
<li>vacuum cleaner, eureka small portable 4 amp for computer motherboards and inside desktops
</li>
<li>vacuum cleaner, craftsman&reg; shop vac w&#47;numerous attachments
</li>

</ol>

</div>                           <!-- closing column-a -->
<div id="column-b">    <!-- starting column-b -->

<ol start="31">

<li>sewing machine — husqvarna&reg;
</li>
<li>commercial grade serger machine
</li>
<li>coffee maker — (2) hamilton beach&reg; 12 cup brand new
</li>
<li>hot plate — cuisinart&reg; commercial 1200w brand new
</li>
<li>hot plate — cuisinart&reg; commercial 1200w used
</li>
<li>sheet sets — eight egyptian 900-thread ct. 100% cotton embroidered king size brand new
</li>
<li>toaster oven — delongi&reg;
</li>

</ol>

<div class="tools" style="text-align: center">
thousands and thousands of
<br>
dollars worth of tools:
</div>


<ol start="38">
<li>vast assortment of hand tools and specialty hand tools, socketwrench kits (both inch <span class="curly7">&amp;</span> metric, 3 crowbars in graduated sizes, drill bit sets, sanders, screwdrivers, yankee&reg; push drill, hole cutters, diamond-bit glass cutter, hacksaws, mitre saws, pruning saws, toothed hand saws, pruners
</li>
<li>commercial grade hand truck
</li>

<li>electric chainsaw &ndash; stihl&reg; 24&rdquo; w&#47;stihl&reg; noise canceling headphones
</li>
<li>corded saw &ndash; craftsman&reg; 7¼” circular saw
</li>
<li>corded saw &ndash; craftsman&reg; jigsaw
</li>
<li>drill &ndash; milwaukee&reg; corded
</li>
<li>rubberized binoculars
</li>
<li>craftsman&reg; 15 amp table saw table
</li>
<li>saw — makita&reg; 3-3/8” cordless circular
</li>
<li>saw — makita&reg; 7¼” cordless circular
</li>
<li>router — hercules&reg; 2¼ hp variable speed
</li>
<li>fixtures — hundreds of dollars worth of bathroom, plumbing, lighting <span class="curly7">&amp;</span> fan fixtures
</li>
<li>ladder — 24” aluminum
</li>
</ol>

</div> <!-- closing column-b -->
</div> <!-- closing twocolumns -->

</body>        <!-- closing body -->
</html>
2

Try these nodifications…

#twocolumns {
   display: flex;
   flex-direction: row;
   /* justify-content: space-between; */
   gap: 1em;
   width: 96%;
   margin-left: 1%;
   margin-right: 1%;
   margin-bottom: 3.13rem;
}
#column-a {
   flex: 1 auto;
   /* display: flex;
   flex-direction: column; */
}
#column-b {
   /* width: 48%; */
}

…for starters.

2 Likes
3

snadyleiby . . . thank you but I’m trying to follow a template Paul O’Brien created for me awhile back because I’m so bad at this. You’re introducing (what I think are) new shortcut Flex terms I was hoping to avoid. I prefer a verbose version whenever possible so I can see each step.

The thing I don’t understand is why I literally lifted this code from Paul’s masterpiece and followed it to the letter (I thought groan) and it won’t display those columns in equal widths. The only difference is that I’m using lists. Is there something you can point to in my existing code that’s causing column-a to jump its margin? I just don’t understand what I’ve done wrong. :thinking:

4

There are many ways to do the same thing with flex and you can make each column stretch with the following.

/

* remove this
#column-b {
   width: 48%;
}
*/

/* add this */
#column-a,
#column-b{
  flex:1 0 0;
}
1 Like
5

It’s brilliant Maestro. Now, how would we place a 1% margin between the two columns? Thanks as always Paul. U Da Man. :stuck_out_tongue_winking_eye:

—s

6

After Paul’s edit, your columns do not appear centralised on the web page. This is because of:
width: 96%;

Delete width: 96%; and insert column-gap: 1%;

2 Likes
7

Thank you Archibald. Is this the “gap” snadyleiby mentioned above? I hearted him! :blush:

8

“gap” is a shorthand property for “column-gap” and “row-gap”.

1 Like
9

Awesome. Thanks Archibald. :clap:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.