CHAPTER 16 PAGE LAYOUT WITH CSS
IN THIS CHAPTER
Fixed, liquid, and elastic page layouts
Two- and three-column layout templates using floats
Two- and three-column layout templates using absolute positioning
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-based 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). You may know of better approaches. In fact, because there is so much to be said about CSS page layout, I’ve provided pointers to additional samples and tutorials on the Web. New techniques turn up regularly.
Page Layout Strategies
Way back in Chapter 3, The Nature of Web Design, we established the fact that there is no way of knowing exactly how wide, skinny, tall, or short a user’s browser window will be. Users may set their browsers to fill the monitor at one of the standard resolutions or have them set to some other comfortable dimension. The precise size of any given web page ...