HTML and CSS Reference
In-Depth Information
Listing 4-4.
Creating a table
/* Setup a table for the content and sidebar */
#contentArea
{
display: table;
}
#mainContent
{
display: table-cell;
padding-right: 2px;
}
aside
{
display: table-cell;
width: 280px;
}
These rules set the
display
attribute on the top-level elements. The
contentArea
element is set to
table
and the
mainContent
and
aside
elements are set to
table-cell
. These elements are then rendered as cells within the overall
content element. To complete the alignment, the padding on the
mainContent
is set to 2px and the width of the
aside
element is set to 280px. The width of the mainContent is calculated automatically using the remaining space.
The page layout should now look like Figure
4-10
.
Figure 4-10.
The page layout with the sidebar on the right
