We finally learned to center a div, then browsers added sidebars

The net result of what this site is doing seems to result in one of two effects when I open the sidebar, randomly:

1) the sidebar covers the content, while the content has blank space to the right, or

2) the content moves off the right edge of the screen, leaving a large blank space to its left.

Both of these are wrong. If I have a sidebar open, the site is now narrower, stop trying to be clever.

My immediate reaction to this is why is the browser giving the site this information, and could we stop.

This might be some kind of a weird requirement for a piece of art, but I would literally never expect a website to center a div according to the browser window instead of the viewport. It just looks wrong and feels wrong.

What's the substantial difference betweeen "browser added sidebar" and "the browser has allowed height and width of the window to be resized since the dawn of the web"?

You’ve effectively created a slide over sidebar. It’s an interesting hack to get there but IMO “should” properly be the domain of the browser.

Screenshots would be helpful, because (you may be surprised to learn that) it is not entirely obvious which mode of behavior is supposed to be "wrong".

Anyway, I wouldn't say it currently behaves nicely (like something I would like to reuse anywhere whatsoever). Tested on Firefox opening Bookmarks on the left. First off, there is this ugly flicker, as browser first renders the "wrong" version, then your JS "fixes" it. Second, there is some concurrency problem, as by opening and closing Bookmarks repeatedly I somehow managed to render both versions: centered to viewport and covered by sidebar.

And, yeah, as others have said, I also think that allowing sidebar to cover your webpage content is absolutely bogus and don't foresee myself wanting this behavior, ever. But that's up to you.

I had no idea what this was talking about at first because I had JS blocked, so nothing special seemed to happen when I opened the bookmarks panel. This looks absolutely goofy. I don't know why you'd want the content potentially getting covered by unrelated UI elements.

Meanwhile this website has learned how to break mouse scrolling.

Websites should be thought of as VMS and shouldn't be trying to reverse engineer host state.

I think the scrollbar-gutter property helps with this. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...

margin:0 auto is the (probably incorrect) incantation I have always reached for

I'm 55 years old. My eyes are not what they used to be and neither are my glasses. I also own a copy of "Usage and Abusage" but I'll pass on that. Click on story link. My laptop renders a page - OK its black text on a white background (thank you but I doubt its a deliberate boon) ...

... why on earth is the offering a "page" ie emulating a printed page? In portrait!

I'll accept that most people are not fixated about grammar, punctuation or basic decency: that's fine.

However a "page" in portrait that looks awful on a landscape screen is unpleasant. You can easily request my viewing parameters and adjust accordingly. It's even worse when you are dispensing advice about www page layouts.

There needs to be images on this

Centering a div? Impossible.

Jokes on you, I never learned and now LLMs just know how to do it instead.

[dead]

[dead]

[dead]