This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
Centering Page Content and Creating a Full-width Header4:48 with Guil Hernandez
A common layout structure in web design involves a centered content area with a header and footer that take up the full width of the page.
- Depending on your design, you may want the header and footer in your layout to stretch from edge to edge of the browser so the left and right sides won't appear cut off.
- This approach makes the layout feel open and less constrained.
- One approach is to create a wrapper the main content and an inner wrapper for the content inside the header and footer.
- You can leave 'outer' elements like the header and footer at their default 100% width.
- It's common to have more than one wrapper on a page and even to have containers inside of containers.
You need to sign up for Treehouse in order to download course files.Sign up