A Robust Fluid Layout
Converting the fixed-width layout to a fluid center column layout involves a number of changes to the markup. Here are the three main changes.
Most notably, you must remove all the width:774px declarations off the containers, since they now have to change size as the browser width changes. Without an explicit declaration, the containers default to width:auto, which is just what you want. You also need to change from the floating method of arranging the columns to the relative/absolute technique. Absolutely positioned elements (the side columns, in this case) use the positioning context of their closest absolutely positioned ancestor (the column container). By using the top and left settings for the left column and the top and right settings for the right column, you can move the columns up into the top corners of their respective containers. One big advantage of this method of positioning the side columns is that you can now reorganize the markup so that the center column with the page content comes first; the side columns are absolutely positioned, so it doesn't matter where they appear in the markup. There are two benefits to doing this. First, users with disabilities, who might be using a screen reader or non-mouse navigation device to step through the markup, will encounter the content immediately. Second, search engines tend to rank content that is placed near the top of the markup highest, so this arrangement can help your content rank higher in search engines. The new fluid layout has some constraints on just how fluid it can be. Fluid sizing is definitely user friendly, because the layout can be adjusted to match the available screen real estate. The problems with fluid layouts, however, are that, by narrowing the browser window, the user can either crush the content until the side columns overlap and the content disappears or stretch the browser so wide that text lines become very long. Both of these options make it hard for the user's eye to move from the end of one line to the start of the next. By constraining the maximum and minimum widths to which the layout can size, you give the user the benefits of a fluid layout, while avoiding these two problems.
CSS2 introduced the max-size and min-size properties, which enable you to set how wide or narrow an element can size. By using these properties on your mainwrap that encloses the whole layout, you can control the range of your fluid layout. As a final touch, in the following markup, I also used auto margins so that if the user sets the browser wider than the maximum width allowed for the layout, the layout centers itself in the browser window.
Let's look at the new markup
[View full width]
<body>
<div id="mainwrap">
<div id="header"><p>A fluid-width faux-columns example</p></div>
<div id="contentarea" class="clearfix">
<div id="contentarea2" class="clearfix">
<div id="column2">
<p>This layout uses absolute/relative positioning to position the side columns within
their respective faux columns containers.</p>
<p>You can control the maximum and minimum widths of the fluid center area.
Once the layout reaches its maximum width, it centers itself in the browser as the window
gets wider.</p>
<p>Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus
mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse
consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis
fermentum purus.</p>
<p>Nunc justo nisl, vulputate in, sagittis in, pretium sodales,
magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna.
Nunc mattis congue leo.</p>
</div><!--end column2-->
<div id="column1">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div><!--end column1-->
<div id="column3">
<p>This template uses the Alsett clearing method.</p>
</div><!--end column3-->
</div><!--end contentarea2-->
</div><!--end contentarea-->
<div id="footer">This is the footer</div>
</div><!--end mainwrap-->
</body>
Note that column2, the center content area, appears before the two side columns, column1 and column3, in this markup.
Here is the CSS:
<style type="text/css">
body {font: 1.0em verdana, arial, sans-serif;
text-align:center; <-- a
}
* {margin:0; padding:0;}
div#mainwrap {min-width:780px; max-width:960px; <-- b
margin-left:auto; margin-right:auto; <-- c
text-align:left; <-- d
}
div#header {height:32px; background-color:#CAF; text-align:center;} <-- e
div#contentarea { background-color:#FFF; <-- f
background:url(images_pres/faux_left.gif) repeat-y top left; <-- g
position:relative; <-- h
}
div#contentarea2 {background-color:#FFF;
background:url(images_pres/faux_right.gif) repeat-y top right; <-- i
position:relative; <-- j
}
div#column1 {width:150px;
position: absolute; <-- k
top:0px; left:0px; <-- l
background-color:#CCC; <-- m
overflow:hidden; <-- n
}
div#column2 {background-color:#FFF;
margin:0 170px 0 150px; <-- o
}
div#column3 {width:170px;
position:absolute; <-- p
top:0px; right:0px; <-- q
background-color:#DDD; <-- r
overflow:hidden; <-- s
}
div#footer {background-color:#FAC; text-align:center; padding-top:6px;} <-- t
div#column1 ul {margin: 20px 0 0 26px;} <-- 20
div#column2 p {font-size:.8em; margin:0 30px 1em ;} <-- 20
div#column3 p {margin: 20px 10px 0 10px;} <-- 20
/* Alsett Clearing Method code removed here to save space */ <-- u
(a)Centers the layout in IE 5 (b)Sets the max and min widths (c)Centers the layout in SCBs (d)Stops elements from inheriting the body's text-center (e)Temporary placeholder styles for header (f)Ensures bg is white if faux graphic doesn't load (g)Faux-column graphic left column (h)Set positioning context for left sidebar div (i)Faux-column graphic right column (j)Set positioning context for right sidebar div (k)Contextual positioning in contentarea container (l)Positions col within contentarea container (m)Left column bg color (n)Prevents overlarge elements breaking out of column (o)Margins to make room for sidebars (p)Contextual positioning in contentarea container (q)Positions col within contentarea container (r)Left column bg color (s)Prevents overlarge elements breaking out of column (t)Temp footer styles (20)Some basic styles for placeholder content (20) (20) (u)See Chapter 5 for this code or go to www.bbd.com/stylin.
The layout in Figure 6.10 sizes to the browser width but cannot become too wide or narrow. It works in all modern, standardscompliant browsers, and it doesn't have the issues associated with floats wrapping the right column under the left if columns become too wide (from an overly large image, for example).
[View full size image]
Note also that it is the use of positioning context (see Chapter 4) that makes this layout work. The side columns are absolutely positioned, which means that by default, their positioning context is body. In order to have the layout center in the screen after it reaches maximum width, the columns can't be positioned relative to body (which is always the width of the browser window), because if this was the case, the sidebars would stay at the edge of the browser, even as the rest of the layout moved away from the browser edges. By setting the column containers' position property to relative, they provide the positioning context for the sidebar divs; the side columns then move with the rest of the layout.
| The side columns each have an overflow:hidden declaration to visually trim graphics or other elements that are wider than the column rather than have them spill out over other areas. |
To see this for yourself, temporarily remove position:relative from each of the container divs. Then save and reload and open up the browser wider than the maximum width value so that the layout starts to move away from the browser's sides. If you do so, you will see that those side columns remain at the edge of the browser window because their positioning context has reverted to the default, body.
I will show you how to work extensively with this template in the next chapter.
| 
No comments:
Post a Comment