Both the Stylin' book and the CSS in 10 Minutes book have good tutorials on creating robust liquid layouts using faux columns.. The layout described in the Stylin' book uses absolute and relative positioning to create columns while the lesson in the CSS in 10 Minutes book uses floats. This lecture gives you some background on the exercises and provides you with the initial files with which you can proceed through the exercises.

A Robust Fluid Layout

Stylin tutorial page structure

This tutorial begins on page 162 of the Stylin' book. In this tutorial, you will create a three-column design using absolute & relative positioning between the side columns and their respective faux column containers. The center column, the header and footer are liquid, while the two side columns are fixed-width.

This design applies min-width and max-width to prevent the user from narrowing the content area excessively; or making the browser so wide that lines of text become very long and hard to read.

There are eight containers in this design:

"mainWrap" This container wraps around the entire page, enveloping the components of the page. This is used to keep the page in the center of the viewport; min-width:780px and max-width:960px are applied to this container. 
"header" This container is used to target elements in the header. This DIV is liquid.  
"contentarea" Provides positioning context for column1's faux column background graphic.
"contentarea2" Provides positioning context for column3's faux column background graphic.
"column2" Contains the main content. Note that column2 is actually above column1 and column3 in the markup. Absolute positioning allows us to do this and still position column1 to the left of column2. column2 actually overlaps both column1 and column3, but right and left margins are specified for column2 so that the text in column2 does not overlap the left or right columns. 
"column1" Contains the navigation component of the page. This is a fixed-width column.
"column3" Contains sidebar info for the page.  This is also a fixed-width column.
"footer" Contains the footer. Provides context for styling of footer elements. This DIV is liquid. 

This is an example Open in a New Window of the completed design. When you vary the browser window's width, you can see that that header, footer, and content vary with the browser window, while the navigation and right sidebar's width are fixed. If you narrow the window too far, min-width takes effect and the entire page becomes fixed at 780 pixels. If you widen the window excessively, the entire page becomes fixed at 960 pixels, and the content centers itself in the viewport.

View the initial unstyled markup Open in a New Window. If you view the source, you'll notice that the content column, column2, appears at the top of the markup followed by the data for the two side columns. This 'content-first' markup is ideal for accessibility and search engine optimization. Users with disabilities who might be using a screen reader that processes the markup sequentially will encounter the content immediately.

Save the initial unstyled markup as robust_3faux_liquid.html. You'll also need to save a copy of the background images for the left Open in a New Window and right Open in a New Window faux columns.

Once you've saved all the necessary files locally, you are ready to proceed to the "Robust Fluid Layout" lesson on page 162 of the Stylin' book.

This design exercise uses the Aslett Clearing Method to force the faux columns to appear identical heights. To review the Aslett Clearing Method, go back to the Clearing Methods Open in a New Window lecture.

Try This

To add to your repertoire of CSS techniques, replace the Aslett Clearing Method with the Overflow Method Open in a New Window in your completed layout. Was this more or less complicated than implementing the Aslett Clearing Method?

Positioning Three Columns with a Header and a Footer

CSS in 10 Lesson 21 page structure

This is Lesson 21 in your Sams Teach Yourself CSS in 10 Minutes book. This lesson steps you through the process of creating a three-faux-column liquid design; this time using floated columns.

This is an example Open in a New Window of the completed design. Notice that the width of all three columns change according to the width of the browser window. This example design does not restrict the user from narrowing the page width—you can narrow the page so that the text in adjacent columns start overlapping.

This design uses seven containers.

"h1" h1 is used as the container, rather than a DIV. This streamlines the markup just a tad. 
"container" This container wraps around the main content of the page, the news sidebar, navigation component and the footer. It also positions the faux column for the news column. 
"container2" This container positions the faux column for the nav column. 
"content" The is the main content of the page. 
"news" This DIV contains the news sidebar text 
"nav" This DIV contains the navigation component of the page  
"footer" The footer rests at the bottom of the page, centered. 

To begin the lesson, save the initial, unstyled markup Open in a New Window as 3_faux_column_liquid.html. You'll need to save the background images for the middle Open in a New Window and right Open in a New Window faux columns, as well.

In the step entitled "Creating Selectors to Style the Three-Column Layout", listing 21.2 lists a group selector: h2, h3, p { ... } Note that the P tag should not be included in this group selector.

I have already added the correct blank rules in the above document for your convenience.

Now that you have everything you need for the lesson, proceed to Lesson 21 of your Sams Teach Yourself CSS in 10 Minutes book. If you have any questions, or want to share any revelations, please let us know in the forum!

Setting margin and padding on the BODY element
Like lists, browsers use different default approaches to indent the BODY element. Opera uses padding, and other standards compliant browsers use margin. To force all browsers to indent the BODY element from the edges of the viewport consistently, set both margin and padding explicitly for the BODY element.

Try This

As I mentioned, if you narrow the browser window sufficiently, the text in the columns begin to spill out of the faux-columns, and encroach on the text in the adjacent columns. To prevent this, you can specify a min-width setting on the BODY element. This prevents the user from narrowing the page excessively. Experiment with different values of min-width. You might even apply the min-width property to any of the other containers, rather than applying it to the BODY element to see the different effects.

Resources