www.it-ebooks.info Page Layout Strategies
5% 70%
5% 25%
70%
25%
div#main { width: 70%; margin-right: 5%; float: left; background: yellow; } div#extras { width: 25%; float: left; background: orange; }
Figure 16-2. Liquid layout using percentage values.
In the example in Figure 16-3, the secondary column on the left is set to a specific pixel width, and the main content area is set to auto and fills the remaining space in the window (I could have also left it unspecified for the same result). Although this layout uses a fixed width for one column, it is still considered liquid because the width of the page is based on the width of the browser window. 25px 200px
25px Resizes to fill browser window
200px
Resizes
div#main { width: auto; position: absolute; top: 0; left: 225px; background: yellow; } div#extras { width: 200px; position: absolute; top: 0; left: 0; background: orange; }
Figure 16-3. Liquid layout combining fixed-width and auto sized columns.
Dealing with line lengths Although long line lengths are possible in liquid layouts, it’s certainly a manageable situation and not a reason to reject this layout approach. In the vast majority of cases, users have their browsers sized reasonably, that is, somewhere between 800 and 1250 pixels. If your page is two or more Chapter 16, Page Layout with CSS
313