Andrey (azangru) wrote,

CSS is hard...

Here’s someone’s site with a characteristic symptom of setting width to 100vw (and using a mac while doing so) — a horizontal scrollbar with thin extra space added because 100vw includes the width of the vertical scrollbar.

It quickly becomes apparent that both the header and the footer on the site have width set to 100vw:

But it is only the footer and not the header that is actually responsible for the scrollbar. It took me a little while to notice the max-width: 100% added in a different header class, which keeps the width of the header in check.

But what the hell is going on with the top margin of the footer? Why does the browser show a narrow band of empty white space between the window’s right border and the right border of the margin? It makes zero sense unless it’s a browser dev tools bug:


  • Via Twitter

    Via a tweet, but I thought I'd get my own copy. A beautiful illustration of how a caption totally misrepresents what's been captured in the photo.…

  • (no subject)

    Here's an extract from Uncle Bob's book Clean Agile. Although he has fallen out of grace with the champions of social justice, the sentiment…

  • (no subject)

    Twelve thousand people pressed the button. Obviously most of them his followers, but still... interesting:

  • Post a new comment


    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.