Remix.run Logo
We finally learned to center a div, then browsers added sidebars(seg6.space)
39 points by seg6 2 hours ago | 25 comments
gerdesj a minute ago | parent | next [-]

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.

JoshTriplett 34 minutes ago | parent | prev | next [-]

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.

seg6 7 minutes ago | parent [-]

Agreed, 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.

kccqzy an hour ago | parent | prev | next [-]

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.

seba_dos1 an hour ago | parent | next [-]

Same. Thank heavens the website doesn't know the position of the browser's window in respect to the screen it's on.

krick 33 minutes ago | parent | next [-]

Actually, they do, sort of. At least, if you use GLSL shaders. I remember some demo project using it in a way that made it appear that the website "sees" another window with the same website, which blew my mind when I saw it first. Cannot recall the name or anything else to locate it.

fluoridation an hour ago | parent | prev [-]

Wait 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 an hour ago | parent [-]

Wait, I have to hold my phone how in order to see the div? ಠ_ಠ

giancarlostoro 21 minutes ago | parent | next [-]

The same way Steve Jobs said to hold the iPhone.

blamarvt an hour ago | parent | prev [-]

I assume you have to be facing the server...

seg6 35 minutes ago | parent | prev [-]

The point of centering an element horizontally is to make sure that the content you’re viewing is directly in front of you. Browsers with a sidebar shift the content to the right, assuming the sidebar is on the left, which I’ve come to dislike! Others have expressed the same preference, hence this little snippet on my website.

stevage 22 minutes ago | parent | next [-]

> The point of centering an element horizontally is to make sure that the content you’re viewing is directly in front of you.

That's an awfully big assumption. For starters, you're assuming that the browser window itself is centered on the screen, and that the device is centered in front of the user.

I don't think this is the point of centering an element horizontally at all, and the result you have created here is not at all what I as a user want.

scubbo 11 minutes ago | parent | prev | next [-]

I salute your dedication to understanding and fixing a problem that bothers you - but I must add my voice to those who think that this is not a good design for general use. The viewport is the region within which content should be positioned, and thus within which they should be centred. By your logic, left-aligned content in a browser with a left sidebar should be deliberately covered.

nkrisc 21 minutes ago | parent | prev | next [-]

Joke’s on you: my browser window isn’t centered.

wizzwizz4 28 minutes ago | parent | prev [-]

As a rule, you should not add functionality to a website to compensate for browser misfeatures. People who want the browser to work differently can get a different browser: that's why we call them "user agents". Making the web all complicated like this mainly serves to make it harder for people to use alternative browsers, or for browsers to change their misfeatures without breaking compatibility.

crtasm an hour ago | parent | prev | next [-]

Meanwhile this website has learned how to break mouse scrolling.

krick 38 minutes ago | parent | prev | next [-]

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.

seg6 3 minutes ago | parent [-]

I’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.

fluoridation an hour ago | parent | prev | next [-]

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.

busymom0 an hour ago | parent [-]

> 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.ph...

SpyCoder77 11 minutes ago | parent | prev | next [-]

There needs to be images on this

skgough an hour ago | parent | prev | next [-]

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

jszymborski an hour ago | parent | prev | next [-]

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

sodapopcan an hour ago | parent [-]

That's fine but it only centres horizontally. Usually when people talk about "the div centring" they mean x and y, dead centre (as this article is).

josefrichter an hour ago | parent | prev [-]

Centering a div? Impossible.