HTML and CSS Reference
In-Depth Information
A quick test drive…
Almost
perfect!
The onl
y
remaini
ng issue
is the e
xtra
space h
ere…
This is great! Our two columns look (almost)
perfect. Try making the browser wider, and
then narrower. Notice that both columns
are always equal in height and we no longer
have the problem with a column overlapping
the footer. And we've got our content in the
correct order for mobile users!
There's only one tiny little problem, which is
easily fixed: notice that the spacing between
the header and the columns, as well as the
footer and the columns, is just a bit too large…
What's the problem with
the spacing?
We currently have a 10px bottom margin on the
“header”
<div>
, and a 10px top margin on the
“footer”
<div>
. Before we added the table layout,
we were specifying the margins of both the “main”
and “sidebar”
<div>
to have a 0px top margin, so
the total margin between them and the “header” is
10px, and a 10px bottom margin. Now, remember
that the vertical margin's block elements sitting
next to each other collapse—meaning that even
though we had 10px of margin on the bottom of
the columns and 10px of margin on the footer,
this margin collapses into 10px, so the total space
between the columns and footer is also 10px.
When we removed the margins from the “main”
and “sidebar”
<div>
s, we created the 10px of
spacing using the
border-spacing
property in
the “tableContainer”
<div>
instead. This adds
10px of space between cells, as well as 10px of
space around the edges.
But the space created by
border-spacing
and
a margin does
not
collapse! So we ended up with
20px of space between the header and the columns,
as well as 20px of space between the columns and
the footer. Fortunately, it's really easy to fix.
