HTML and CSS Reference
In-Depth Information
■
The result shown in Figure
12-12
is consistent across all browsers. It appears that the row generates
anonymous table cells only when explicitly defined cells are also present, as you'll see in a later example.
Note
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>
t o
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;
}
