Chapter 6.2: The layout problem

One of the key reasons we want style sheets is to help with the layout of the page. While this does not sound like a hard problem on the surface, once you start thinking about the problems you realize what a mess things are. We have issues with different devices, different sizes, different resolutions, browsers rendering things differently, accessibility, and dynamic content. This is on top of making sure that the designers are able to build a good user experience.

The fact that we browse the internet on our phones, tablets, televisions, laptops and desktop machines is part of the problem. A site needs to work on all of these different devices and must be relatively responsive while doing so. You can’t just scale the content to fit the screen size of the devices as that would result in pages that were not useful at all on phones.

The size of the device is only part of the problem. You can have two devices that are the same size but have different resolutions. This means that text that would be readable, albeit small, on a higher resolution device may be blocky and hard to read on the other device.

Then we have the issues of the aspect ratio. This will vary not only depending on the device, but some devices, such as laptops and computers, let us use window interfaces that let us resize a window to be whatever shape we desire. This can be compounded by browsers that render the same content differently. Even with the standard, there are differences between how different browsers interpret the standard.

Making things worse is the web tends to favor more dynamic content so things on the page can change while the page is being looked at.

What this ultimately means is that designers have a hard job since in order to accommodate all of the above, the design of the page needs to be flexible without giving up too much of the design. To accomplish this CSS supports several different mechanisms to let you control the layout of the page in ways that are flexible. One of the display types even does things similar to the pre-style sheet days where layout was done using tables.

At the heart of CSS’s layout is the display attribute. Most of this chapter is focused on the different settings for this attribute. We have already experienced blocks and spans (inline) and their merged version (inline-block). But to that we will add flex boxes, and grids. There is also a multi-column option that can be used. Adding to this is the ability to float elements so you can have more of a newspaper style where text flows around images. If that is not enough, then we can have more precise positioning controls, even allowing for elements to overlap each other. Finally, when the differences between devices is just too great for the above methods to deal with we can tailor our content for specific devices. This is done by basing layout decisions on properties of the device that we are working with.

While the layout flexibility is great, it is also finicky. Once you understand the basics, however, it should be possible to get a page that is close to what you want but that will work almost everywhere.