HTML and CSS Reference
In-Depth Information
#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.
■
The conclusion that can be drawn from the preceding examples is that the most reliable and efficient way
of creating a single row of equal height columns with CSS table display is to use
display: table-cell
on its own.
Just wrap the elements that you want to display as columns inside another block element, but don't change the
display
property of the outer element.
Tip
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.
