A Robust Fluid LayoutConverting the fixed-width layout to a fluid center column layout involves a number of changes to the markup. Here are the three main changes.
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 <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. <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
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). Figure 6.10. This layout is fluid but has maximum and minimum constraints to prevent the layout from getting too wide or too narrow.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.
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. |