Turns out, flexbox   is mandatory?

Modern web design layout calls for   flexbox   . There seems to be no way around it. In this column, I wanted this secondary story to occupy the left 25% of the desktop view, with the primary article occupying 50% of the desktop view, and I wanted a third column, taking up the last 25%, on the right.

Then, when viewed on a mobile device (anything less than 600,) the primary article would stay at the top, and the two other blocks would drop below that. But I can't make that happen without   grid   and   flexbox.

I'm sure there must be some super-simple fact I'm missing about "old-school" CSS and HTML, where with something like a combination of margin and padding widths, and floats and clears, one could force the "primary" column to stay at the top while the other two columns drop below that.

Having run numerous basic experiments, I'm still not getting it; so what you get here is a page that, when resized, stacks the columns in their expected inline order.

I'm looking forward to the next lab, which happens to be all about flexbox, so the choice of which column stays up top should be easily solved.

Worker Goes to Work and Comes Home

Brave Worker Calls it "Just Another Day"

Rex Everyhting, a construction worker from West Hills, MI, arrived home today after a grueling day of really hard work like you can't even imagine in a million years, stoically claiming, "it wasn't all that bad!"

"When it really comes down to it," he opined, "I find what's more important is the layout of this newspaper!"

"I'm supposed to be the so-called 'primary' article, right? So, don't you think that I would stay on top when the user is on mobile? Shouldn't the primary article appear at the top of the viewer?
Duh?"

He went on to say, "I give Mitch a ton of credit for trying to make this article stick to the top.

Why shouldn't it? I mean, it's the primary article. So, why is it so hard to stack blocks however you want them stacked, without flexbox and grid ?

Early CSS and HTML allowed for stacking order of blocks, but it seems that it's all moot now anyway, because there's flexbox and grid .

Along with Bootstrap and/or other frameworks, developers have a galaxy of options to make user experience optimal.

Rex concluded with an encouraging thumbs-up to Mitch: "However you figure it out, Mitch, I'm behind you one-hundred percent! I know you can do this! (I HATE coding but you like it so go for it... you do you! LOL! :D )"

Anyone wishing to tip Mitch for doing such a great job, just go here -> TIP JAR -- it's totally secure. -- It's PayPal, fuhgettaboutit.

Hairbands: Out in the 80's, Back in the 2010's

It turns out that hairbands are just fine, but what's really importanrt is the fact that this third column over here isn't cooperating. On desktop, it's supposed to be 20-ish%, with 6px padding, and when on mobile, it should drop below the 'secondary' column.

Without using flexbox and grid, there really must be some way of floating and clearing and adjusting the widths of the padding and margins, but all that is moot because we have much more modern web technologies that allow us to control the viewport however we want.

We just have to keep studying a lot more stuff.

Practice sessions