The “Inside” Problem

I love an edge to edge background colour with text content well positions inside. But then I want to break out the image to go full width, or have two images side by side that push outside the text container width. Chris takes a look at the different scenarios and how you might look to solve them.

So, you’re working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to:

1. Limit the width (for large screens)
2. Pad the edges
3. Center the content

It’s “the inside problem” in web layout. It’s not hard, it’s just that there are lots of considerations.

An excerpt from The “Inside” Problem

View original article