<< Back

A tip about CSS layouts

I often notice many people say their site looks different on different browsers. Which is completely expected. But is there anything one can do to help mitigate the severity of the differences?

Note: I am well aware that the main point of most the Neocities websites is to have a retro feel, and many are supposed to be hacky and weird. This article is purely for those who want a solution for modern browsers.

Most browsers in use today support something called Flexbox. Flexbox is an incredibly useful concept in today's front-end development, and it allows you to easily achieve nice looking, cross compatible browser layouts.

If you want a more in-depth guide to Flexbox, consider reading this article. Otherwise, here is a basic way to get it working:

  1. Add the following code to your <style> tag if you have one, or to your CSS file:

    Hint: you can change flex-direction between row or column to specify which direction you want to sort your child elements.
  2. Describe how your child elements should behave in your container, for example:

    Hint: if you want more than one line of elements or if they dont fit, you can add the flex-wrap:wrap; property to your parent container, so that every child that doesn't fit goes on a new line.

And that is pretty much it!

There are a couple other solutions, such as using the newer Grid or supporting your layout with tables, but I lack experience with either one of them to make a comprehensive article.

I'll take a further look into compatibility in the future. It should be interesting. For now, thank you for reading! If you have any questions, or noticed any errors, let me know! I hope this article was of use.