Having trouble getting 2 Flex Columns to honor their widths

Gandalf just so you know I did Tidy this but it didn’t reformat anything because it’s a list. I did however put the styling in lower case. Who loves you baby. :stuck_out_tongue_winking_eye:

This is a mod after one of Paul’s Flex jobs — in fact, the best piece he’s ever helped me with! Chief . . . why don’t these columns display? I know I’m doing something wrong but I can’t seem to ferret it out arrrgh Flex tsk.

Here is a CODEPEN

<!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>PAGE 13 INVENTORY &lsquo;WALKUP MELODIA et al.&rsquo; &#7172; &#167; MAY 20, 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: 2.5rem 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: .8px;
        line-height: .8;
}
#TWOCOLUMNS {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 96%;
        margin-left: 1%;
        margin-right: 1%;
        margin-bottom: 1rem;
}
#COLUMN-A {
        display: flex;
        flex-direction: column;
}
#COLUMN-B {
        width: 48%;
}
.CENTR {
        text-align: CENTER;
        margin-top: .63rem;
        margin-bottom: .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 {
        color: black;
        text-align: left;
        font-size: 1.5rem;
        line-height: 1.05;
        font-weight: 700;
        font-family: 'Encode Sans Semi Condensed', sans-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;
        margin-bottom: 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</div>

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

<OL>

<LI>
Furniture — Extremely valuable inlaid mahogany furniture from North Carolina which I had purchased after seeing some of the pieces in an <i>Architectural Digest</i> magazine in 1988 (<span class="HVYBU">$16,000 . . . </span><span class="HVYRD">35 YEARS AGO</span>); King-Sized Canopy Bed Frame, 7’ Highboy, two Low Boys
</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">45 YEARS AGO</span>); 40” Inlaid Coffee Table, 66” Sofa Table, Inlaid Sofa Side Table,  Inlaid Chest 2 Doors
</LI>
<LI>
<span class="HILITE4">Furniture — Hand Crafted in Santa Rosa 4 legal-width solid oak 4-drawer file cabinets 
(<span class="HVYBK">$5,000 . . . </span><span class="HVYBK">30 YEARS AGO</span>)</span>;
</LI>
<LI>
&ldquo;Barrister&rdquo; Bookcases &ndash; two 4-Shelf Glassed-In, Cherry
</LI>
<LI>
<span class="HILITE4">&ldquo;Barrister&rdquo; Bookcases &ndash; four Large 4-Shelf Glassed-In, Walnut</span>
</LI>
<LI>
<span class="HILITE4">TABLE — Solid Oak 4’ w&#47;20” Expansion</span>
</LI>
<LI>
PLASTIC STORAGE Drawers — stacking, white
</LI>
<LI>
<span class="HILITE4">Shelving Units — two 84” High Walnut</span>
</LI>
<LI>
Bookcases &ndash; four White Kitchen Double-Door 60” High w&#47;Maple Tops
</LI>
<LI>
<span class="HILITE4">CREDENZA — Commercial Grade Steel 6’ x 30” x 30”</span>
</LI>
<LI>
<span class="HILITE4">TABLE — Commercial Grade Steel Table Beige w/Oak Formica Top</span>
</LI>
<LI>
SmartPhone LG STYLO 4 w&#47;540 GB superMicro Card &ndash; Android Oreo 8.1
</LI>
<LI>
<span class="HILITE4">Steel Shelving Units — three (various Dimensions)</span>
</LI>
<LI>
<span class="HILITE4">Gun Case, Blue, 3 removeable shelves</span>
</LI>
<LI>
PLASTIC STORAGE Drawers — stacking, black
</LI>
<LI>
<span class="HILITE4">Washing Machine &ndash; Sears “Canyon Capacity” Top Loading</span>
</LI>
<LI>
Pine Crates on Wheels &ndash; six Handmade <span class="CURLY9">&amp;</span> Shellacked 24&rdquo; X 15&rdquo; X 15&rdquo;
</LI>
<LI>
<span class="HILITE4">Analog TV &ndash; 24&rdquo; Sony Picture-in-Picture</span>
</LI>
<LI>
Boston® Home Theatre Speaker system
</LI>
<LI>
<span class="HILITE4">Boston® Speakers, two 32” x 10” x 18”</span>
</LI>
<LI>
DVD Shelving units, two Black
</LI>

</OL>

<OL start="22">

<LI>
DOZENS OF DVDs containing Backup Files, many with Sensitive Password and Account Data (but <B>NO</B> Social Security, Calfresh, VISA or Mastercard numbers, and certainly NOT the password to my phone! Go fish you bastards!)
</LI>
<LI>
Lenovo® 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>
<span class="HILITE4">Printer &ndash; Brother Multi-Function 17&rdquo; Extra-Wide Inkjet</span>
</LI>
<LI>
<span class="HILITE4">Printer &ndash; Canon 17&rdquo; Extra-Wide Inkjet</span>
</LI>
<LI>
Fellowes® Commercial Paper Shredder
</LI>
<LI>
APC Backup Universal Power Supply
</LI>

</OL>

</div> 	                                 <!-- CLOSING COLUMN-A -->
<div ID="COLUMN-B">        <!-- STARTING COLUMN-B -->

<OL start="34">

<LI>
RARE BOOKS
</LI>
<LI>
DVD Movies including numerous Box Sets LOTR, Twilight Zone Definitive, Rogers <span class="CURLY9">&amp;</span> Hammerstein Musicals, Elizabeth R, Sherlock Holmes, LOTR Complete
</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>
COFFEE MAKER — (2) Hamilton Beach® 12 Cup BRAND NEW
</LI>
<LI>
HOT PLATE — Cuisinart® Commercial 1200W BRAND NEW
</LI>
<LI>
<span class="HILITE4">HOT PLATE — Cuisinart® Commercial 1200W Used</span>
</LI>
<LI>
SHEET SETS — Eight Egyptian 900-Thread Ct. 100% Cotton Embroidered King Size BRAND NEW
</LI>
<LI>
<span class="HILITE4">TOASTER OVEN — DeLongi® </span>
</LI>
<LI>
KNIFE — Meat Cleaver Stainless Steel Hand-Crafted Filigree
</LI>

</OL>

<DIV class="TOOLS">
Thousands and thousands of dollars worth of TOOLS were stolen:
</DIV>

<OL start="45">
<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® Push Drill, Hole Cutters, Diamond-Bit Glass Cutter, hacksaws, mitre saws, pruning saws, toothed hand saws, pruners
</LI>
<LI>
Electric Chainsaw &ndash; Stihl® 24&rdquo; w&#47;Stihl® Noise Canceling Headphones
</LI>
<LI>
Corded Saw &ndash; Craftsman® 7¼” Circular Saw
</LI>
<LI>
Corded Saw &ndash; Craftsman® Jigsaw
</LI>
<LI>
Drill &ndash; Milwaukee® Corded
</LI>
<LI>
Rubberized Binoculars
<LI>
15 amp Table Saw Table
</LI>
<LI>
SAW — Makita® 3-3/8” Cordless Circular
</LI>
<LI>
SAW — Makita® 7¼” Cordless Circular
</LI>
<LI>
ROUTER — Hercules® 2¼ HP Variable Speed
</LI>
<LI>
FIXTURES — Hundreds of dollars worth of BATHROOM, PLUMBING, LIGHTING <span class="CURLY7">&amp;</span> FAN FIXTURES
</LI>
<LI>
<span class="HILITE4">LADDER — 6’ Aluminum</span>
</LI>
<LI>
LADDER — 24” Aluminum
</LI>
<LI>
Automobile Battery Recharger Craftsman®
</LI>
<LI>
16’ Telescoping Pruner
</LI>
<LI>
<span class="HILITE4">Food Dehydrator</span>
</LI>

</ol>

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

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

Your IDs twocolumns, column-a, and column-b are lower case in the HTML but in your CSS they are upper case. Make them consistent and you will get two columns.

4 Likes

In addition to what @Archibald has said you will also need to change the width to flex-basis with a shrink value of 1 (or use both width and basis for older browser support but flex-basis wins out against width).

e.g.

    #column-b{
      /*width: 48%;*/
      flex-basis:1 0 48%;
    }
2 Likes

Arrrgh! I swear case will be the death of me. Thank you so much Archibald. This is one I will never disrespect again. This happened to me in a Table I made just last week. I said Could this be a case thing? Naaa. Yup. You will respect case in HTML or HTML ain’t goin’ to the dance!

Very deep Maestro. As always, the complete solution. Thank you so much Paul. Again.

You know I was reflecting on how much Sitepoint has taught me and it just blows my mind! :blush: I realize I don’t deserve a B.S. in Computer Science but it sure feels like I should get one! lol Thank you everybody for putting up with me.

1 Like

Guys it doesn’t work. I went back in and was scrupulous about lowering the case on every single list tag as well as the IDs but it isn’t honoring the width for column-b. I added your flex line Paul. Here’s a screenshot of the output without the viewport line (it’s unreadable with it, trust me).

Also please note I am the only person who will be reading this so Viewport either starts looking good on my phone or it’s out.
O

It looks OK here (even without incorporating Paul’s CSS improvement):

1 Like

That’s because there is still a discrepancy with the case for the column ids (and also a typo).

Note the equal sign on column=b.

#column=b {
  width: 48%;
}

That means the width is no longer applied and the columns will most likely be 50% assuming column content is equal (but not guaranteed). However once the width is added then the flex-shrink kicks in and the column reduces to a narrow column.

#column-b,
#COLUMN-B{
  width: 48%;
}

Your original code is working with the changes I mentioned and assuming you matched case. I can only assume that you haven’t matched the case properly.

I know I’ve mentioned it about a few times now but you could avoid these simple typos if you keep all your css and html in lower case. It looks so much nicer also :slight_smile:

It looks great Archibald (after removing the Viewport line), I just wish I knew why . . .

I tidied the classnames up for you.

Do you really want two columns across on a phone?

That’s going to look like this on an iphone SE.

Either you have to make the text so small you can’t read it or you just have one column across unless you have a very large phone :slight_smile:

I remember from before that this is just for you and no one else so you may indeed want to scale the text smaller and have two columns.

1 Like

They look great to me. :face_with_peeking_eye: I don’t know why people assume you have to blow things up to an astronomical proportion just to be able to read it on a smartphone. It also looks good as the PDF I rip it to.

But Paul I don’t see column=b anywhere in my original code. ??

I do concede your point about the font size Paul but this document won’t be printed, it’s only a visual and I’m making use of every pixel on the page. Also I’ll point out to my cousins across the pond . . . this is scaled to US Letter size. But yes, it would breathe a bit more in a smaller font size.

I still don’t know why Archibald’s worked and just your code wouldn’t Paul. But look, there’s a CRex on the loose (Case Monster) and obviously I need to scrutinize every line of my code to flush him out. I’ve got something capitalized somewhere that’s eating my HTML.

But yeah — wherefore column=b Chief?

That was in @Archibald 's codepen not yours :slight_smile:

It only worked because of the typo but as I described above that would not have been robust. :slight_smile:

1 Like

Well here she is and not too bad if I say so myself! :blush:

1 Like

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