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.

Funnily I can't reproduce the effect at all. I am using Firefox and with sidebar the content of the page centers on the remaining viewport width, like any other site does. I have also tested with Edge, same result. With Edge's auto collapse (i.e. non sticky vertical tabs), I get the described effect, but again this is like any other site. I was actually expecting quite bad results in Edge because it has some sidebars on the right and I thought this page compensates in the wrong direction then. Don't have Chrome installed to see if that does anything differently.

Note I like the default behavior of browsers to center on the viewport as opposed to the window treating sidebars as overlays over the page. Whenever pages do that with their own gadgets I hate it, because they often don't move their content out of the way and it makes it unreadable unless scrolled out of the range of these gadgets, which often isn't possible at all. And even when it is, it effectively reduces the total usable screen to a fraction.

Whenever I'm bothered enough (happens mostly on mobile), I use a kill sticky bookmarklet to fix that.

The sidebar reduces the size of the viewport, and the viewport is what you're centring within. This is obvious and sensible behaviour from Firefox. Please don't centre based on screen res or whatever. Basing your centre position on anything other than the viewport is user-hostile behaviour.

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.

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.

Meanwhile this website has learned how to break mouse scrolling.

So this interpret the sidebar as a temporary UI element (like a popover window), but for me I'd rather interpret the sidebar as a constant element (like the sidebar of Windows Explorer). And indeed I'm using Firefox with Tree Style Tabs or Sidebery to have an explorer-like tree view of my browsing session; it makes more sense for me to have this as a permanent fixture.

With that in mind, I would think this kind of preference should be under the control of the browser, not of an individual website.

Nah, I'd rather not. I want sites to center within the viewport, not the browser window. I keep my tabs in a vertical sidebar, and I treat the viewport as "the browser". I want things that should be centered to be centered within that viewport.

I think it' very debatable whether or not this should be a web page's behaviour.

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

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.

I'm confused about why this website is using less than half of my window for content. I understand wanting some margins, but a third of my window on each side seems pretty egregious. At least it's centered though!

For some reason, this made me think of privacy & security issues: user fingerprinting, user-type detector (devtools open = dev/engineer) etc.

Detecting the difference between window.innerWidth (viewport) and window.outterWidth (window with bar etc) in JS, can be powerful to the browser user via an Extension. However, not so if the site/page uses (e.g a JS Lib).

Personally, i like the viewport vs window separation that the browser provides. I don't want an Element to not budge or care about my sidebar/window dressings, thank you very much.

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"?

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.

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

The right change is to change the browser so the sidebar becomes an overlay, if you want this.

One of my favorite interview questions was asking how many ways a developer can center a DIV or any block element in a container/browser with pre-defined height, or responsive heights. I have special soft corner heart for people who said TABLES.

Wouldn't the HTML Popover API be a simpler fit for the sidebar example? If it's an overlay rather than part of the document layout, popover seems to eliminate quite a bit of the positioning logic.

This is horrible, centering should take the sidebar width into account.

The demo page doesn't work as described in Firefox when I open my bookmarks or history sidebar. It displays a correction offset, but Firefox valiantly defeats this evil hack and makes sure that the box is still at the center of the viewport as the viewport shrinks. It doesn't work in Chromium either when I open devtools as a sidebar. Correction resets to "move pointer" when I do.

I could appreciate the hack from an engineering perspective if it actually worked, but from a user perspective, this is just another example of overambitious anti-designers going out of their way to replace whatever simple, sane and predictable defaults a browser provides out of the box with something incredibly dumb. Browsing has become a rather paranoid activity of constantly second guessing what bespoke bullshit the website authors might have attached to operations that otherwise have previously established sane behaviors provided by the browser by default.

> This is a fairly specific itch. I use one browser window tiled directly in front of me, usually with its sidebar open. When a site deliberately centers a narrow layout, I want it at the dead center of that window, not the space left over beside the sidebar.

I still don't understand the need for this. I mean, it's hn, so "I wanted to" is a perfectly acceptable reason, but when you resize and move the browser window, you don't expect the content to remain where it was. The browser window is not a literal window that shows you what's behind your screen. If the sidebar should behave like an overlay, then that's something that the browser should manage, not each website. From the blogpost I can see that this preference is highly subjective, so it being a browser-wide setting makes much more sense.

Next they are going to round of the corners of your website, either you like it or not.

Centering a div? Impossible.

screw, marry, kill of the following <center>, <blink>, <marquee>

I'll go first: - marquee - center - blink

now if you don't mind there are some clouds outside I need to shake my fist at

Am I the only person that loathes sidebars in browsers? Maybe it's because I've been using a browser since 1996, but my brain is deeply set in the idea that the space below the chrome 110% belongs to user space.

I've tried a few browsers with vertical tabs, and my brain keeps seeing them as part of the page itself. It's a very distracting and uncomfortable experience.

hah the pointer trick is clever. tbh ive been living with everything looking 5px off for years and just... accepted it. does this work with vertical tabs in firefox?

You have an out of place script element at the end.

Just because you can, doesn’t mean you should.

And then people added unhidable chat bot icons and even windows that hide entire parts of the interface with no recourse.

There needs to be images on this

Z-index has been invented.

A bit of context, since this is much less serious than it may have sounded:

I use a single browser instance in a tiled window manager, occupying a fixed window directly in front of me, usually with a sidebar open. When a site intentionally centers a fixed-width container, the sidebar leaves that container visibly off the dead center of my screen. I happen to dislike that. This is a personal aesthetic preference for my particular setup, not a claim that viewport centering is generally wrong.

The intended behavior does not remove content or replace responsive layout. The sidebar still narrows the webview and the page reflows normally, the correction only repositions the container that was already meant to be centered, so its center remains in the same physical place. If content ends up covered, offscreen, or stuck in the wrong state, that’s a bug.

I don’t particularly mind the brief movement while toggling a sidebar, since the browsers I use already visibly resize and reflow pages while doing so.

I’m considering reverting the behavior on the blog and keeping it extension only. I’ve also added GIFs to the post showing the intended effect.

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