HTML and CSS Reference
In-Depth Information
#wrapper {
max-width: 1200px;
margin: 0 auto;
}
#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;
}
h1 {
background-color: #74685A;
margin: 0;
padding: 10px;
color: #FFF;
}
#footer {
background-color: #252017;
color: #DB9924;
padding: 10px;
}
This results in the sidebars and main content being displayed as three equal-height columns as before.
All browsers wrap them in an anonymous table row and an anonymous table, which is contained inside the
wrapper<div>
. The header and footer fill the full horizontal width, as shown in Figure
12-13
.
Figure 12-13.
The anonymous table is sandwiched between the header and footer
