CSS fluid layouts with faux columns
- 09-09-2007
Faux columns is a method of making CSS columns appear equal in length, regardless of the content that they contains. The method was originally developed for fixed width layouts, but the concept can also be used on fluid layouts. This article explains how to use faux columns on fluid layouts with two different examples.
One thing many struggles with regarding CSS is the fact that elements only stretch vertically as far as they have to.
The method developed to get around this problem is called Faux columns, and the solution is simply to use a vertically tiled background image to create the illusion of colored columns with equal height. As mentioned this method was originally developed for fixed width layouts, in this article the method is used on fluid layouts. This is not the first article published about fluid layouts with faux columns, but the reason for writing this article is that a while ago a article called The only CSS layout you need(?) was published here earlier. This article and the examples are a follow up to that article, and are based on the same HTML/CSS.
How a fluid layout width faux columns is made
The concept for both examples below are that we are using two different images, one for the left column and one for the right column, and make them repeat itself vertically. The background images used in both examples are shown below.
 |
Background image used on left column |
 |
Background image used on right column |
Three column fluid CSS layout with faux columns and 100% height
The HTML in this example is 100% identical to all those examples you find in the article The only CSS layout you need(?). This layout has a height of 100% (including a footer). To create the look of the left column, the background image is repeating vertically in the body tag in the CSS, while the background image for the right column is repeating vertically in the mainContainer div.
The CSS for those specific parts are below:
body, html {- color: #000;
- font-family: Verdana, Arial, Tahoma, sans-serif;
- height: 100%;
- background: url(/examples/images/faux-column-left.png) 0 100px repeat-y #fff; /*** This is the left column background "faked" with an image. The 100px is added to have control of where the vertically repeating starts. The background color #fff (white) will be the background color for our content area ***/
- }
#mainContainer {- min-height: 100%;
- background: url(/examples/images/faux-column-right.png) 100% 100px repeat-y; /*** This is the right column background "faked" with an image. The 100px is added to have control of where the vertically repeating starts. ***/
- }
Three column fluid CSS layout with faux columns
The HTML in this layout is a little bit different than the first example. Because this layout hasn't a height of 100% we can't create the look of the left column by repeating a background image in body. To get around that problem another mainContainer div (or wrapper as many prefer to name it) is added to the HTML.
The CSS for our two mainContainers:
#mainContainer {- background: url(/examples/images/faux-column-right.png) 100% 100px repeat-y #fff; /*** This is the right column background "faked" with an image. The 100px is added to have control of where the vertically repeating starts. The background color #fff (white) will be the background color for our content area ***/
- }
#mainContainer2 {- background: url(/examples/images/faux-column-left.png) 0 100px repeat-y; /*** This is the left column background "faked" with an image. The 100px is added to have control of where the vertically repeating starts. ***/
- }
About the layouts
By looking in the example pages source code you will find further explanations about how these layouts are made.
Related articles
- The only CSS layout you need(?)
- Three column fluid CSS layout with rounded content corners and 100% height