Jason Knight
2 min readSep 6, 2022

--

Right off the bat <div /> is invalid HTML. Always was, and doesn't work right. Even in XHTML. It might be valid XML, but that doesn't mean SGML parsers can handle it properly and the people who say that it's fine to do are full of manure. DIV is not an "empty/void" element like IMG or INPUT, and therefor the XML-style compatibility closure is gibberish SGML/HTML on that tag.

See this test. I have the <div /> before a paragraph. Because <div /> is absolute gibberish in browsers, it's treated as an unclosed tag, remaining open until the parent -- body -- is closed. <div /> is NOT a thing in HTML! Anyone telling you it is or doing that is talking out their collective backsides! Yes, I realize that means most if not all React developers. :D

https://codepen.io/jason-knight/pen/LYmVjNb

Next for what you're doing with it, why piss on the markup when you could just use generated content? Don't slop a DIV into place

Same goes for your use of a fixed height for what absolute positioning could accomplish. You're overthinking this and creating fixed sizes, the antithesis of sane and rational design. Using PX metrics -- bascially resulting in a broken layout since you didn't fix the font size, and telling users with accessibility needs to go F*** themselves along the way. Remember, if you're declaring layout in PX, you're flipping the bird at a great swath of users. Like myself as a non-standard metric user.

The suggested use of vw and vh isn't all that great an idea either. They're useful for small measurements, but at full size they do not account for scrollbars, thus you end up having 100% viewport width PLUS the scrollbar width as ths size, instead of the actual body or element size. This can lead to unwanted scrollbars.

Not that any of these broken issues surprise me when you included mentioning the mentally enfeebled ignorant garbage that is Failwind. That's not on you, that's on the sleazy dirtbag predators like Wathan taking advantage of people who don't know any better. Peddling 100% bunko bullshit about 'easier" or "better for collaboration" when all they're doing is making you work harder, not smarter, and flipping the bird at accessibility and efficiency in the process. Useless halfwit turds like Wathan do not know enough about HTML or CSS to be telling anyone how to use web technologies!

I forked your pen to show what I mean. No PX, no extra DIV, no fixed sizes and instead letting flow do its job.

https://codepen.io/jason-knight/pen/mdLJwNM

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

No responses yet