HTML and CSS Reference
In-Depth Information
For this code, you might expect the
header to extend across the entire
width of the page because it's set to be
display: table-row
. But what actually
happens is shown at right. Because
there are no elements in the row with
display: table-cell
,
header
is promoted
to that role, and an anonymous table
object assumes the role of the table row.
The result is that the header and footer
both have the same width as the first
table-cell
element in the middle row.
display:
table
good
display:
table
bad
Like tables, elements'
visual properties are
related so a set of
elements in a row all
share the same height.
Absolute
responsibility
for layout.
Some of the same
performance
issues as tables.
You now have a grasp of what CSS2 has to offer in terms of layout. The good
news is, since the launch of IE8 in March 2009, every major browser supports
all these approaches. In the next section, you'll learn about two small but
useful improvements that CSS3 offers for CSS2
—
compatible layouts.
