It’s important to understand that design in web development suggests how pages be displayed. CSS is not a series of ironbound rules. Web pages are fluid by default: content automatically flows inside the browser, scaling and wrapping to fit on any screen. Design may constrain or enhance that behavior, but it is only ever a guide for web content.
Web page layout is very broadly divided into two categories: “fluid” and “fixed”. Fixed layout is the easiest to implement, and what we’ll start with here. Fluid design – also known as responsive design – is more challenging, but we’ll do a little of that too.
Prerequisites: The CSS reading list to this point
Time: 90 minutes
- Single Column Text
- Exploring Simple Layouts
- Multiple Columns
- CSS Grid Layouts
- Newspaper-Style Columns
- Causes of Gaps in Layouts
- Solving Overflow Issues
Step through the tutorials in Learn CSS Layout.
When You’re Done
Creating one page is just the beginning: placing your styles in a linked style sheet (as you should be) suggests that you will be making many more pages using the same presentation. In that case, you’ll need navigation – ideally, more than a raw list of links – so styling site navigation is what we’ll look at next.
Photograph of Buen Pastor Church in Ponferrada, Spain by Ángel Sánchez García
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.