Centering a div was solved, then browsers added sidebars

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

A developer's simple CSS grid centering trick broke when browser sidebars appeared. The fix required measuring the browser chrome, but DevTools threw off the calculation. The final solution uses a pointer event to locate the webview within the window, and it's been packaged into a tool called 'center, actually' for use on any page.

The .site div was still perfectly centered, just inside the wrong rectangle.
  1. JoshTriplett

    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.

  2. kccqzy

    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.

  3. stkdump

    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.

  4. pixlmint

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

  5. krick

    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.

  6. PetitPrince

    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.

  7. fluoridation

    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.

  8. crtasm

    Meanwhile this website has learned how to break mouse scrolling.

More from this day

2026-08-05