HTML and CSS Reference
In-Depth Information
Fix the spacing
To fix the spacing between the header and the columns, and the footer and the columns,
all we have to do is change the bottom margin of the header to be 0px and the top margin
of the footer to be 0px. We currently specify all four sides of margin with the shortcut rule
margin:
10px
in the rules for both the header and the footer, so instead, we'll expand
that margin property to specify each side separately so we can specify 10px for all sides
except the one next to the columns. Like this:
#header {
background-color: #675c47;
margin: 10px;
margin: 10px 10px 0px 10px;
height: 108px;
}
Instead of h
aving 10px on all s
ides of the
header, we n
ow have 10px on a
ll sides
except the b
ottom side, which
has 0px.
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
margin: 0px 10px 10px 10px;
font-size: 90%;
}
A final test drive of
our table display
With this change, our columns are now perfect!
We have 10px of spacing between all the pieces
and the columns line up evenly, even if you
expand or narrow the browser window.
While
display:
table
won't always be the
right tool for your layout needs, in this case, it's
the best solution to get two even columns of
content in the Starbuzz page.
