HTML and CSS Reference
In-Depth Information
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).
Figure 12-14. The header and footer are converted to anonymous table cells
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;
Search WWH ::

Custom Search