HTML and CSS Reference
In-Depth Information
■
IE 8 fails to apply the right padding, resulting in the text overflowing the table cells. To fix this, an Internet
Explorer conditional comment in table-cells.html sets the width of paragraphs to
94%
.
Note
Table Row Only
The styles in table-row.html set only the
display
property of the
wrapper<div>
t o
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
).
Figure 12-12.
Setting display to table-row on its own doesn't work
