Chapter 16. Page Layout with CSS
Now that you understand the principles of moving elements around on the page using CSS floats and positioning, we can put these tools to use in some standard page layouts. This chapter looks at the various approaches to CSS-driven web design and provides some simple templates that will get you on your way to building basic two- and three-column web pages.
Before we get started, it must be said that there are seemingly endless variations on creating multicolumn layouts with CSS. This chapter is intended to be a “starter kit.” The templates presented here are simplified and may not work for every situation, although I’ve tried to point out the relevant shortcomings of each.
Page Layout Strategies
Before we start dissecting CSS layouts, let’s talk about the various options for structuring a web page. As you know, web pages appear on browsers of all sizes, from tiny phone screens to cinema displays. In addition, users can resize their text, which has an impact on the layout of the page. Over time, several standard page layout approaches have emerged that address these issues in various ways:
Fixed layouts stay put at a specific pixel width regardless of the size of the browser window or text size.
Fluid (or liquid) layouts resize proportionally when the browser window resizes.
Elastic layouts ...
Get Learning Web Design, 4th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
