Layout patterns

There aren’t that many ways to lay out containers on a page when you’ve only got one column to work with. I see this as a good thing, because it’s relatively easy to consider every option at the page level.

Whether it’s visible or not, all content on a website is essentially inside a container because of how HTML and the box model works. The images below represent the options you have for how to lay out those containers on a web page.

The faint red lines represent the edges of the website body, or the outside edges of where content can be.

The white boxes with a black border represent the container. These might be visible in your design—for example if you use a background colour for the container—or they might not, if the content sits directly on the background of the page.

Finally, the dark grey box represents whatever content you have inside the container. See the next chapter for layout options for this content, of which there are many.

Left-aligned

This is the default layout choice so it’s also the simplest. The container is aligned with the left edge of the page, and the right edge of the container is wherever the content stops.

Centred

There’s not much to say about centred containers. It’s as common as left-aligned containers, if not more so on marketing websites/landing pages. The usual warnings about centred content apply: your content will have a ragged left-edge which might make reading harder.

Full width container with centred content

Sometimes your content isn’t wide enough but you want the container to take up the full width of the page for layout and alignment purposes. A simple solution is to make the container full width and centre the content. This runs the risk of the content being lost in a sea of colour, but I’ve seen it used well on plenty of websites.

Full width container with aligned content

This is the same approach as above but you left-align the content inside the container. It has benefits as far as readability goes because the content is left-aligned, but the empty space to the right of the container might look odd.

Note you could also right-align the content, but I rarely see this.

Alternating left and right alignment

You can take up the full width of the page if you alternate containers between being left-aligned and right-aligned. Each container will be the right size for the content inside it, but the group of containers as a whole will use more horizontal space. This has the benefit of looking interesting. It also might make reading harder, since the content jumps around.

Nested containers with aligned content

This is a way to have a full width container for a better sense of layout, aligned content for better readability, and not have an unfortunate empty space to the side of the content. By using nested containers of different colours or styles, you add a sense of depth to the page since the containers are stacked from back to front. On top of that, there’ll be more visual interest in the empty space to the side of the content.

Note you can also right align the content.

Content patterns → ← Examples in the wild Back to the table of contents