On the previous page we dealt with making the container DIV wrap around our floated column DIVs. The next problem we run into is that our columns are rarely the same length. If we want to apply background colors to these uneven columns, the result are not particularly desirable.
On this page I will present methods for making the column background colors extend the full length of the container DIV no matter which column is the longest. This deceptively simple technique has been dubbed 'faux columns' and entails the use of a background image which repeats down the length of the containing element behind the actual columns simulating the 'look' of full-length columns. You can apply "faux columns" to both fixed width layout as well as to fluid layouts. Yes, really!
Fixed Width Faux Columns
Indeed, we have already used a 'faux columns' background in a previous lecture - Two-Columns with Header/Footer—Floated Columns
. This method works very well when applied to a fixed-width container DIV. Once the specific width of the container DIV has been determined, use an image editing program to create an image file the same width as the container DIV (e.g., 770px) and maybe 12px high. Apply colors to the image file in widths that are equal to the widths of the columns nested within the container DIV. You can make an image that imitates multiple columns and even insert 'borders' between the columns, as shown below:
Here is the styling that applies the 'faux column' background image to a centered, fixed-width container DIV:
Style Sheet
div#wrapper {
width: 770px;
margin: 0 auto;
background: url(images/fauxColumnBg.gif) repeat-y;
}
HTML Markup
<!-- begin wrapper -->
<div id="wrapper">
<div id="column1">First floated column</div>
<div id="column2">Second floated column</div>
<div id="column3">Third floated column</div>
</div>
<!-- end wrapper -->
Here is an Example of a 'faux columns' background applied to a fixed-width container DIV.
to the container DIV. This is demonstrated in an example below. Although the examples here employ simple flat blocks of color to produce the 'columns', you could also apply gradients or subtle patterns to the background image which can produce interesting and sometimes even three-dimensional effects.
So how do you apply a 'faux columns' background image to a fluid page design? Background images don't (usually) stretch, do they?
Two Fluid Faux Columns
The 'faux columns' examples presented below will work with a two-column design wherein the column widths are percentages of the containing element. For example, the left column may be styled to take up 20% of the page width and the right column 80%.
Here is an
Example of a page using fluid width "faux columns." Try resizing the browser window. No matter how long the content of either column, the column colors extend from the top of the browser window to the bottom and always retain the correct percentage widths! This method can also be applied to a container DIV. For simplicity I will start by applying the fluid background to the entire BODY element. In a moment I will give the additional code necessary to make it work within a container DIV.
Here is how fluid 'faux columns' are achieved...
The first task is to create a very wide background image, at minimum 2,000px wide. The width is to accommodate high resolution monitors. The height of the image can be as little as 1px but it will be easier to work with if it is slightly taller. The image I made for the example is 12px high. Decide what percentages of the screen width the page columns will occupy. In this example I use 20% for the left column and 80% for the right column. Do the math to figure out how many pixels wide each of the "column colors" needs to be in the background image:
Left column color:
2000px * 20% = 400px
"Border" color:
2000px * .3% = 6px
Right column color:
2000px - 406px = 1594px
Save your work as a 4-color GIF image. The file size should be small.
In a previous lecture on Background Images, I discussed using percentages for the background-position property. Rather than setting x/y coordinates to position the top left corner of the image within its containing element, percentage positioning matches the specified x/y coordinate within the image with the same x/y coordinate within the containing element. If you're not sure what this means, please revisit the "Background Images" lecture, and review the section on percentage positioning under the "The background-position Property" heading.
By anchoring the image at the point of transition between the left and right columns - 20% from the left edge in this scenario - the background image will always stay in the proper position relative to the columns no matter what the screen size is.
The following is the essential code for styling two fully fluid columns with a 'fluid' background image:
Style Sheet
body {
margin: 0px;
padding: 0px;
background-image: url(images/fauxBgLg.gif);
background-repeat: repeat-y;
background-position: 20% 0;
}
div#leftColumn {
float: left;
width: 15%;
display: inline; /* for IE dbl margin float bug*/
margin: 1% 1% 1% 2%;
}
div#rightColumn {
float: right;
width: 75%;
display: inline; /* for IE dbl margin float bug*/
margin: 1% 2% 1% 1%;
}
HTML Markup
<body>
<div id="leftColumn">First floated column</div>
<div id="rightColumn">Second floated column</div>
</body>
Note that the margins and width assigned to the "leftColumn" DIV and to the "rightColumn" DIV only adds up to 96%. The extra 4% is 'insurance' against the possibility that browser rounding may cause the column widths to add up to more than 100% and, therefore, break the layout.
Fluid Faux Columns in a Container DIV
In this example we will nest our two-column fluid page content inside a fluid "wrapper" DIV that will cover 80% of the viewport width, and to which we will apply the "faux column" background styling. This also presents an opportunity to demonstrate the application of a Clearing Method.
In the HTML markup we will nest the leftColumn and rightColumn DIVs inside a new DIV named "wrapper":
HTML Markup
<body>
<div id="wrapper">
<div id="leftColumn">First floated column</div>
<div id="rightColumn">Second floated column</div>
</div>
</body>
Next we need to make the wrapper DIV stretch to encompass the two floated
columns. I achieve that here by applying the Overflow Clearing Method to the wrapper DIV. The wrapper DIV is set to 80% width and centered in the browser window using margin:auto. In addition, the 'faux columns' background
style declarations are moved from the body rule
to the div#wrapper rule.
Style Sheet
body {
margin: 0px;
padding: 0px;
background-image: url(images/fauxBgLg.gif);
background-repeat: repeat-y;
background-position: 20% 0;
}
div#wrapper {
width: 80%;
overflow: hidden;
margin: 0 auto;
background-image: url(images/fauxBgLg.gif);
background-repeat: repeat-y;
background-position: 20% 0;
}
div#leftColumn {
float: left;
width: 15%;
display: inline; /* for IE dbl margin float bug*/
margin: 1% 1% 1% 2%;
}
div#rightColumn {
float: right;
width: 75%;
display: inline; /* for IE dbl margin float bug*/
margin: 1% 2% 1% 1%;
}
Now the Fluid Faux Columns background is applied only within the wrapper DIV as shown in this Example.
The subject of 'Faux Columns' does not stop here! Check out the second page of
Zoe Gillenwater's
tutorial
at CommunityMX where she shows you how to create 'faux columns' for a three column fully
fluid layout! And both the Stylin' and CSS in 10 Minutes textbooks
present even more options for applying 'faux columns' to a three column layout
with a mix of fixed and fluid columns. As you might guess, 'faux columns' techniques
are used quite often and in a wide variety of page layouts!
Resources
- A List Apart: Faux Columns by Dan Cederholm
- I Love Jack Daniels: Faux Columns for Liquid Layouts
- CommunityMX: Creating Liquid Faux Columns by Zoe Gillenwater