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-colorthat goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to:
- Limit the width (for large screens)
- Pad the edges
- 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