Arranging Elements - Head First HTML and CSS - page 516

Meanwhile, back at Starbuzz…

It's time to add table display into Starbuzz to see how those columns are going to look. To do
that, we're going to roll back to the Starbuzz HTML and CSS we created at the beginning of
the chapter, so open “chapter11/tabledisplay” to get fresh copies of the HTML and CSS. Edit
“index.html”, and add the two <div> s around both the “main” <div> and the “sidebar” <div> —
the outer one called “tableContainer” and the inner one called “tableRow”. Next, open your
“starbuzz.css” file and let's add the following to the CSS:

Refer back a
couple of pages to
see the HTML if
you need to.

Th e display: table pr operty tells the “ tableContainer”
<d iv> that it will be laid out like a ta ble.
The border -spacing property adds 10px of bor der spacing to th e
cells in the table. Think of b order-spacing like margin for regula r
elements. A nd because we're u sing border-spacin g on the cells, we no
longer need the margins on th e <div>s (see belo w).

#tableContainer {
display: table;
border-spacing: 10px;
}
#tableRow {
display: table-row;
}
#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
vertical-align: top;
}
#sidebar {
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
margin: 0px 10px 10px 10px;
vertical-align: top;
}

Both the “main” <div> and t he
“sidebar” < div> are the cells
in our tab le. “main” is in the
first colum n of the “tableR ow”
(because it comes first in th e
HTML), a nd “sidebar” is in the
second col umn.

We can remove th e
margins on both
“main” and “sideba r”.