Keeping the Footer in Place

Most of the time, a sidebar is likely to be shorter than the main content. However, when elements are floated, all subsequent content moves up to fill the vacated space. As Figure 12-4 shows, the long sidebar in left2col_long.html results in the footer moving up below the main content, leaving the sidebar protruding.

The solution is simple: prevent the footer from moving up by adding the clear property to the #footer style as in left2col_clear.html:

#footer {
    background-color: #252017;
    color: #DB9924;
    padding: 10px;
    clear: both;
}

Filling the Sidebar Background

When the sidebar is longer than the main content, the problem of the background color not stretching the full height of the column goes away. This suggests a possible solution: add the background color to the taller element, and let the parent’s background color show through the shorter one.

In left2col_reverse.html, instead of the sidebar having a background color, it inherits the biscuit background from the wrapper <div>, and the main <div> is given a white background like this:

#wrapper {
    width: 100%;
    min-width: 550px;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #D3C89B;
    border-left: #252017 solid 1px;
    border-right: #252017 solid 1px;
}
#main {
    margin-left: 36%;
    margin-left: -moz-calc(33% + 20px);
    margin-left: calc(33% + 20px);
    padding: 10px 20px;
    background-color: #FFF;
}

This results in both columns having backgrounds that stretch the full height between the header and footer, as shown in Figure 12-5.

While this undoubtedly works, you rarely have the luxury of knowing which column is going to be longer. On a large site or one that’s dynamically populated with content from a database, there’s no way to guarantee the relative proportions of the columns.

You need a more robust solution.

Using a Background Image to Simulate Equal Columns

To get around the problem of the background of one column being shorter than the other, the most reliable cross-browser solution is a technique known as faux columns (faux is French for “false”). A vertically tiled background image on a parent element creates the illusion of equal length columns.

When working with a fixed-width layout, you create an image the same width as the sidebar, and use it as the background-image on the left or right of the parent element. For a liquid layout, you need to create a background image for both columns and position it horizontally using a percentage value as described in “Controlling the Position of Background Images” in Chapter 8. The image needs to be at least as wide as the maximum width of the layout, and the proportions of the background colors need to be the same as for the columns.

The background in left2col_faux.html uses an image that is 1000px wide and just 10px high. The left 330px (or 33%) forms the background for the sidebar, while the rest of the image is white. It’s used as the background for the wrapper <div>, and tiled vertically like this:

#wrapper {
    width: 100%;
    min-width: 550px;
    max-width: 1000px;
    margin: 0 auto;
    background-image: url(images/faux_left.jpg);
    background-position: 33% 0;
    background-repeat: repeat-y;
    border-left: #252017 solid 1px;
    border-right: #252017 solid 1px;
}

The horizontal value for background-position is 33%, so the sidebar’s width (29%) and padding (2% on both sides) must add up to the same amount. The same percentage value is applied to the left margin of the main <div>:

#sidebar {
    float: left;
    width: 29%;
    padding: 2%;
}
#main {
    margin-left: 33%;
    padding: 10px 20px;
}

As Figure 12-6 shows, this produces columns of equal height that maintain the same proportions at different screen widths.

To switch the sidebar to the right, you need a background image that has the narrower column’s background on the right. You also need to change the horizontal background position of the image. Otherwise, it’s just a question of floating the sidebar in the opposite direction, and switching the margin on the main content to the other side. The relevant styles in right2col_faux.html look like this:

#wrapper {
    width: 100%;
    min-width: 550px;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #FFF;
    background-image: url(images/faux_right.jpg);
    background-position: 67% 0;
    background-repeat: repeat-y;
    border-left: #252017 solid 1px;
    border-right: #252017 solid 1px;
}
#sidebar {
    width: 29%;
    float: right;
    padding: 2%;
}
#main {
    margin-right: 33%;
    padding: 10px 20px;
}

The preceding examples apply the background image to the wrapper <div>. This works fine because the header and footer have backgrounds of their own, which conceal the faux columns. Depending on the layout, you might need to wrap the sidebar and main content in a separate <div> and apply the background image to that.

Floating the Main Content

When you float the main content, the roles are reversed. A floated element must have a declared width, so you apply the width to the main content and a wide margin to the sidebar. Otherwise, the technique is identical to floating the sidebar.

In left2col_mainfloat.html, the main style rules are as follows:

#sidebar {
    width: 29%;
    padding: 2%;
    margin-right: 67%;
}
#main {
    width: 63%;
    padding: 10px 2%;
    float: right;
}

This puts a wide right margin on the sidebar, making room for the main content to float to the right, as shown in Figure 12-7.

To put the sidebar on the right, right2col_mainfloat.html reverses the side of the margin on the sidebar and floats the main content to the left like this:

#sidebar {
    width: 29%;
    padding: 2%;
    margin-left: 67%
}
#main {
    width: 63%;
    padding: 10px 2%;
    float: left;
}

Using Absolute Positioning for the Sidebar

Instead of floating either the main content or the sidebar, you can use absolute positioning to move the sidebar alongside the main content. The technique is very similar to floating the sidebar. You put a wide margin on one side of the main content to make room for the sidebar and then move it into place. To ensure that the sidebar moves with the rest of the layout at different screen widths, you need to establish a containing block for it by making the wrapper <div> relatively positioned.

The relevant style rules in left2col_absolute.html look like this:

#wrapper {
    width: 100%;
    min-width: 550px;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #FFF;
    background-image: url(images/faux_left.jpg);
    background-position: 33% 0;
    background-repeat: repeat-y;
    border-left: #252017 solid 1px;
    border-right: #252017 solid 1px;
    position: relative;
}
#sidebar {
    width: 29%;
    padding: 2%;
    position: absolute;
    top: 63px;
}
#main {
    width: 63%;
    padding: 10px 2%;
    margin-left: 33%;
}

An absolutely positioned sidebar on the left doesn’t need to set the left offset because it occupies the same horizontal position as it would if it remained in the normal flow of the document.

If you put the sidebar on the right, there’s no need for a right margin on the main content, as long as the main content has a declared width. But you do need to set the sidebar’s left offset. The styles for the sidebar and main content in right2col_absolute.html look like this:

#sidebar {
    width: 29%;
    padding: 2%;
    position: absolute;
    top: 63px;
    left: 67%;
}
#main {
    width: 63%;
    padding: 10px 2%;
}

This technique works very well when the sidebar content is shorter than the main content. However, there is no way of controlling the sidebar’s overspill if the main content is shorter. As Figure 12-8 shows, the extra content in left2col_abs_long.html goes over the footer and continues down the page. (I’ve changed the footer colors to make the problem stand out better.)

Using a Negative Margin for a Left Sidebar

Yet another way of moving the sidebar into position when it comes after the main content in the HTML markup involves floating both columns to the left. You add a left margin to the main content to make room for the sidebar, and then adjust their relative positions by applying a negative left margin to the sidebar. Strange though it may seem, this has the effect of pulling the sidebar up alongside the main content and then leapfrogging over it into the correct position on the left.

The negative left margin on the sidebar needs to be the same as the combined width of the sidebar and main content. When working with percentage values, the calculation couldn’t be simpler, it’s 100%.

The styles for the sidebar and main content in left2col_negative.html look like this:

#sidebar {
    width: 29%;
    padding: 2%;
    float: left;
    margin-left: -100%;
    }
#main {
    width: 63%;
    padding: 10px 2%;
    margin-left: 33%;
    float: left;
}

This produces exactly the same layout as in Figure 12-7.

You don’t need to use a negative margin to put the sidebar on the right. Just float the main content left as described in “Floating the Main Content” earlier in this chapter.

Table Cells Only

The styles in table-cells.html set the display property of the two sidebars and main content to table-cell. No other table-related properties are used, but the wrapper <div> is given a maximum width and its horizontal margins are set to auto to center it. The styles look like this:

#wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
#sidebar1, #sidebar2 {
    width: 25%;
    padding: 0 2% 10px 2 %;
    background-color: #CC9;
    display: table-cell;
}
#main {
    width: 50%;
    padding: 0 2% 10px 2 %;
    display: table-cell;
}

The width of each sidebar is set to 25% and that of the main <div> to 50%, which adds up to 100%. The 2% horizontal padding on each element doesn’t affect the overall width. Because they’re styled to display as table cells, the standard CSS box model no longer applies. So, when the page is viewed at its maximum width of 1200px, the overall width of each sidebar is 300px, and the main content is 600px, including padding. What’s more, the 2% horizontal padding is based on the width of the whole table, and not on the width of the individual element. Although the sidebars are only half as wide as the main content, all three elements have the same 24px of left and right padding.

All browsers create an anonymous table row and an anonymous table around the cells to produce three columns of equal height, as shown in Figure 12-11. Even though the sidebars contain only headings, the background color fills the full height. At screen widths greater than 1200px, the columns are centered horizontally.

Table Row Only

The styles in table-row.html set only the display property of the wrapper <div> to table-row. The other elements are left in their default state. The styles look like this:

#wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: table-row;
}
#sidebar1, #sidebar2 {
    width: 25%;
    padding: 0 2% 10px 2 %;
    background-color: #CC9;
}
#main {
    width: 50%;
    padding: 0 2% 10px 2 %;
}

In theory, these styles should generate anonymous table cells around the children of the wrapper <div> and an anonymous table around the <div>. What actually happens is that the two sidebars and main content not only remain stacked vertically, but they also break out of the wrapper <div>. They remain aligned against the left of the browser and ignore the maximum width (see Figure 12-12).

Table Row with Cells

Because using table-row on its own doesn’t work, you might expect that setting the display property of the sidebar and main content to table-cell should do the trick. It does, but it has unexpected consequences. The styles in table-row_and_cells.html look like this:

#wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: table-row;
}
#sidebar1, #sidebar2 {
    width: 25%;
    padding: 0 2% 10px 2 %;
    background-color: #CC9;
    display: table-cell;
}
#main {
    width: 50%;
    padding: 0 2% 10px 2 %;
    display: table-cell;
}

If you test table-row_and_cells.html in a browser, you get three columns of equal height in the same way as using display: table-cell on its own in table-cell.html (see Figure 12-11). However, the three columns break out of the wrapper <div> and fill the full width of the browser window, even when it exceeds 1200px. What appears to happen is that an anonymous table is created around the wrapper <div>, and the individual cells take their percentage widths from the anonymous table rather than from their parent.

Table with Cells Only

So, what happens if you set the display property of the wrapper <div> to table instead of table-row? The styles in table_and_cells.html look like this:

#wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: table;
}
#sidebar1, #sidebar2 {
    width: 21%;
    padding: 0 2% 10px 2 %;
    background-color: #CC9;
    display: table-cell;
}
#main {
    width: 47%;
    padding: 0 1.5% 10px 1.5 %;
    display: table-cell;
}

As you might expect, this produces a three-column layout like Figure 12-11. In most browsers, it’s correctly centered when the viewport is wider than 1200px. However, in WebKit-based browsers (Chrome and Safari), it fills the entire width of the screen.

Combining Columns with a Header and Footer

The primary purpose of the preceding examples was to demonstrate the effect of anonymous table objects, but layouts that consist solely of columns are relatively unusual. It’s more common to mix columns with elements that stretch the full width of the page. So, the following examples expand the HTML in Listing 12-1 to include a header and footer at the top and bottom of the page, using the structure in Listing 12-2.

Listing 12-2.  Three-column Layout with Header and Footer

<body>
<div id = "wrapper">
    <h1> Main Heading</h1>
    <div id = "sidebar1">
        <h3> Left Sidebar</h3>
    </div>
    <div id = "main">
        <h2> Main Content</h2>
        <p> The balanced scorecard. . . </p>
    </div>
    <div id = "sidebar2">
        <h3> Right Sidebar</h3>
    </div>
    <div id = "footer">
        <p> Footer content</p>
    </div>
    </div>
</body>

The header and footer are inside the wrapper <div>, and are siblings of the sidebars and main content.

Header, Footer, and Table Cells Only

The styles in table-cells_hf.html are the same as in table-cells.html with the addition of some basic styling for the header and footer. The display property of the sidebars and main content is set to table-cell, but the header and footer styles affect only colors, margins, and padding.

#wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
#sidebar1, #sidebar2 {
    width: 25%;
    padding: 0 2% 10px 2 %;
    background-color: #CC9;
    display: table-cell;
    }
#main {
    width: 50%;
    padding: 0 2% 10px 2 %;
    display: table-cell;
}
h1 {
    background-color: #74685A;
    margin: 0;
    padding: 10px;
    color: #FFF;
}
#footer {
    background-color: #252017;
    color: #DB9924;
    padding: 10px;
}

This results in the sidebars and main content being displayed as three equal-height columns as before. All browsers wrap them in an anonymous table row and an anonymous table, which is contained inside the wrapper <div>. The header and footer fill the full horizontal width, as shown in Figure 12-13.

This is a simple and effective way of creating a single row of multiple columns. Just set the display property of the columns to table-cell. There is no need to wrap them in a row or table. Other elements stack above or below the anonymous table.

Wrapping the Header, Footer, and Columns in a Table Row or Table

In the examples using Listing 12-1, using table-row on its own didn’t work (see Figure 12-12). So, there’s no reason to expect it to work with Listing 12-2. (It doesn’t.) However, what happens when you set the display property of the wrapper <div> to table-row or table might come as a surprise.

In both table-row_and_cells_hf.html and table_and_cells_hf.html, the display property of the sidebars and main content is set to table-cell, but the header and footer are left in their normal state. In the first file, the display property of the wrapper <div> is set to table-row, and in the second it’s set to table. Loading either file into a browser produces the result shown in Figure 12-14. The only difference is that when you use table-row, the layout fills the entire width of the screen, whereas table constrains it within the maximum width of the wrapper <div> (although WebKit browsers still ignore the maximum).

What happens is that the browser generates anonymous table cells around the header and footer, converting the original table row of three columns into one containing five. Obviously, this is not the desired result. The header and footer need to be treated as independent table rows.

Using Separate Table Rows for the Header and Footer

The styles in table_table-rows_and_cells_hf.html try to address the problem in Figure 12-14 by setting the display property of the header and footer to table-row like this:

#wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: table;
}
#sidebar1, #sidebar2 {
    width: 25%;
    padding: 0 2% 10px 2 %;
    background-color: #CC9;
    display: table-cell;
}
#main {
    width: 50%;
    padding: 0 2% 10px 2 %;
    display: table-cell;
}
h1 {
    background-color: #74685A;
    margin: 0;
    padding: 10px;
    color: #FFF;
    display: table-row;
}
#footer {
    background-color: #252017;
    color: #DB9924;
    padding: 10px;
    display: table-row;
}

This has the desired effect of putting the header and footer in separate rows from the columns, but as Figure 12-15 shows, they span only the first column.

This exposes a fundamental flaw of CSS table display for page layout. With an HTML table, a cell can span columns or rows using the colspan and rowspan attributes. But there’s no equivalent in CSS. To get the header to span all three columns, you need to wrap it in a <div>, add two empty elements inside the <div>, and set their display property to table-cell. Even then, each element is treated as a separate cell. So, you can’t have header content that spans all across the top.

The best solution is an anonymous table sandwiched between two ordinary <div> elements, as in table-cells_hf.html. It’s a simple, elegant way of creating a single row of equal-height columns (see Figure 12-13).