Learning Web Design, 3rd Edition

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

Centering a fixed-width page

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 ...