6 ms·
We finally learned to center a div, then browsers added sidebars
- josefrichter 2mo agoCentering a div? Impossible.
- qingcharles 2mo agoGPT-6 will solve this.
- deleted 2mo ago[deleted]
- jszymborski 2mo agomargin:0 auto is the (probably incorrect) incantation I have always reached for
- sodapopcan 2mo agoThat's fine but it only centres horizontally. Usually when people talk about "the div centring problem" they mean x and y, dead centre (as this article is).
- saghm 2mo agoThe article only seems to very briefly mention the vertical axis, with pretty much all of it focusing on interactions with the sidebar (which only affects the horizontal width).
- antimages 2mo agoI disagree that's what people mean by "Centering a div" and the hilariously repetitive corpus of programmerhumor jokes on the matter seem to disagree too. And in either case, I don't think the article fully agrees either, since the thesis of it relates to a strictly horizontal element. If the article doesn't intend to disagree, then it was just a framing device they used in the writing that has some distractions regarding the vertical component unfortunately attached.
- sodapopcan 2mo agoOh really? I always assumed as I never thought horizontally centring was ever a huge problem. Vertical was the actual hard thing for a long time (which is something table cells could easily do since the beginning). You caught me in that I didn't read the full article, but I read enough to see that it has this CSS which centres on both axes: body { display: grid; min-height: 100dvh; place-items: center; }
- kccqzy 2mo agoThis 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.
- seba_dos1 2mo agoSame. Thank heavens the website doesn't know the position of the browser's window in respect to the screen it's on.
- fluoridation 2mo agoWait until they realize that on mobile they can use accelerometer data to keep the element in the same position in space across translations of the device.
- jagged-chisel 2mo agoWait, I have to hold my phone how in order to see the div? ಠ_ಠ
- blamarvt 2mo agoI assume you have to be facing the server...
- alterom 2mo agoI mean, this could have applications, if you need to be facing a certain direction to read the content. While the Silicon Valley is merely a figurative Mecca for all things tech, Apple could require people to be facing Cupertino if you want to watch a WWDC stream :D
- Izkata 2mo agoAww, looks like the magnetometer web API was abandoned: https://developer.mozilla.org/en-US/docs/Web/API/Magnetometer#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/API/Magnetomete...
- skgough 2mo agoI think the scrollbar-gutter property helps with this. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-gutter https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/P...
- crtasm 2mo agoMeanwhile this website has learned how to break mouse scrolling.
- inventor7777 2mo agoWhat do you mean? On macOS Safari I see a scroll bar that I can drag with my mouse if I wish.
- crtasm 2mo agoScrolling the page with mousewheel/multitouch doesn't work unless the pointer is inside the white area ...appears it's been fixed since my original comment. There's still no scrollbar in the expected place on the side of my browser window though.
- globular-toast 2mo agoIt's still broken. It seems to use JS to scroll when outside the white area, but this has a different effect from native browser scrolling. On my device the native scroll is smooth but the fake one is immediate and jumps further on each scroll.
- crote 2mo agoThat's because they are using a fixed-height container element with an "overflow: scroll" on it, which is needed to get that little grey bar at the bottom to complete the "page of paper on grey background" feel. Which of course completely ignores that a page of paper can't scroll, but I guess doing it in a way where the content is split over multiple "pages" underneath each other is too complicated for a basic website - and would be even more jarring to the average reader.
- fluoridation 2mo agoI 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.
- busymom0 2mo ago> This looks absolutely goofy. I don't know why you'd want the content potentially getting covered by unrelated UI elements. Here in Canada, the mobile website for anything related to Indian immigration (Indian passport, visa etc) is done via this absolutely goofy website with multiple levels of UI elements and popups covering the content. Have a look on mobile: https://www.blsindia-canada.com/ottawa-jurisdiction/index.php https://www.blsindia-canada.com/ottawa-jurisdiction/index.ph...
- hulitu 2mo ago> I don't know why you'd want the content potentially getting covered by unrelated UI elements. Well, if Google and Firefox does it, it must be good. Ah, yes, I forgot Microsoft with its helpfull transient "We just introduced new bugs. < remind me later > windows. This is industry standard. I wish I was being sarcastic.
- krick 2mo agoScreenshots 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.
- seg6 2mo agoI’ve added GIFs showing the intended behavior. The brief movement doesn’t bother me, opening or closing a sidebar already resizes the webview and causes pages to reflow in the browsers I use. Ending in the wrong state after repeatedly toggling it is a bug. And yeah, if you prefer viewport centering, there’s no reason you’d want to use the extension.
- jdiff 2mo agoNot trying to argue you out of your preference, but trying to understand it: Why would you want to be able to accidentally hide parts of the page by having a sidebar open, or extended too far? I don't understand why the page should pretend to take up the whole window and ignore that it does truly live in just a viewport. I get why aesthetically it might be pleasing, but isn't that pretty short-lived when faced with serious practical drawbacks?
- JoshTriplett 2mo agoThe 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.
- seg6 2mo agoAgreed, both outcomes are bugs and neither is intended. The idea is simply that, content the site author intended to be horizontally centered stays literally centered on my screen when browser UI changes the viewport.
- wat10000 2mo agoThe author should not intend that, and if they do, my browser should do its best to put a stop to it.
- SpyCoder77 2mo agoThere needs to be images on this
- gerdesj 2mo agoI'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.
- seg6 2mo agoI’ll accept that not everyone likes a portrait page on a landscape screen, that’s a matter of taste. But if you’re going to invoke Usage and Abusage, grammar, punctuation, and "basic decency", it would help to identify an actual error. And perhaps write "it’s" correctly while doing so. I’m also unclear what moral failing you think an A4 aspect ratio represents.
- sherry-sherry 2mo agoLonger lines of text are harder to read. There's a reason newspapers, books, articles, etc are all vertical and often have a similar amount of words per line. It's easier to follow, scan, and find your place. Some more on this below: Optimal Line Length in Reading — A Literature Review (https://journals.uc.edu/index.php/vl/article/view/5765 https://journals.uc.edu/index.php/vl/article/view/5765) Practical Typography — Line Length (https://practicaltypography.com/line-length.html https://practicaltypography.com/line-length.html)
- dyauspitr 2mo agoJokes on you, I never learned and now LLMs just know how to do it instead.
- seg6 2mo agoA 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.
- singpolyma3 2mo ago[dead]
- mvhughes 2mo ago[dead]
- ezwoodland 2mo agoWebsites should be thought of as VMS and shouldn't be trying to reverse engineer host state.
- drewbeck 2mo agoYou’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.
- alterom 2mo agoSee, I'm keeping my siidebar open most of the time, so I WANT it to cover the content that would otherwise be visible - said no one ever. But yay, it's centered relative to the window now! God forbid the user tiles their windows, because it breaks the aesthetic the website author intended.
- duskdozer 2mo agoThe internet has become so imbalanced in favor of what the website owner wants to run on my machine. I've still not found a reliable way of modifying user-hostile React pages. I'm sure before long it will take custom builds to avoid custom CSS being blocked by anti-tamper measures.
- kazinator 2mo agoWhat'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"?
- danielvaughn 2mo agoAm 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.
- Dylan16807 2mo agoDo you always have browsers maximized? If you're used to other windows next to the browser then I'd be surprised if you still find sidebars distracting.
- songhonglei1985 2mo agohah 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?
- saghm 2mo agoI'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!
- woodrowbarlow 2mo agowrapping text at 55-75 characters per line is often recommended in digital typography by UX. research implies that an optimum length exists to maximize reading speed, and although it depends on many factors 55-75 is often parroted as a universal rule.
- hulitu 2mo ago> wrapping text at 55-75 characters per line What happened to 80 ? Ok, 75 is "close enough", but 55 ?
- cluckindan 2mo ago80 is a terminal standard, 55-75 is UX.
- account42 2mo agoIf only UX worried more about user preferences instead of coming up with these dogmatic rules. We can already resize the browser window if we want shorter lines.
- duskdozer 2mo agoI'm sure there's something going back to newspapers on this (though they would of course, fill multiple columns), but I can't help but suspect a lot of these UX studies are just predetermined to justify things like extra space on the margins for ads, "related content" distractions, and such things.
- saghm 2mo ago
- LocalH 2mo agoNah, 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.
- proc0 2mo agoZ-index has been invented.
- Brajeshwar 2mo agoOne 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.
- stkdump 2mo agoFunnily 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.
- boomlinde 2mo agoThe 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.
- bmitc 2mo agoAnd then people added unhidable chat bot icons and even windows that hide entire parts of the interface with no recourse.
- todotask2 2mo agoWouldn'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.
- PetitPrince 2mo agoSo 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.
- pixlmint 2mo agoI think it' very debatable whether or not this should be a web page's behaviour.
- inigyou 2mo agoThe right change is to change the browser so the sidebar becomes an overlay, if you want this.
- Telaneo 2mo agoThe 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.
- yreg 2mo agoPerhaps bad design, but user-hostile is a bit of a stretch.
- i386 2mo agoIts an entire misunderstanding of how the layout system works.
- ipsod 2mo agoIt's user-hostile enough to make users hostile toward your site, for sure. It's not annoying, it's enraging.
- crote 2mo agoIt causes annoying flickering when you resize the window, as it is constantly fighting the browser.
- sbb_equals_ffs 2mo ago> 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.
- nnevatie 2mo agoJust because you can, doesn’t mean you should.
- al_be_back 2mo agoFor 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.
- assimpleaspossi 2mo agoYou have an out of place script element at the end.
- mohsinq227 2mo ago[flagged]
- pprotas 2mo agoThis is horrible, centering should take the sidebar width into account.
- butz 2mo agoNext they are going to round of the corners of your website, either you like it or not.
- git-nebulous 2mo agoscrew, 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