HTML and CSS Reference
In-Depth Information
You've already replaced the “header”, “footer”, and “sidebar”
<div>s with the <header>, <footer>, and <aside> elements. Now
you need to replace the “drinks” and “main” <div>s with <section>
elements and also update your CSS. Leave all the table-display
<div>s in place for now; we still need those to keep the page laid
out correctly.
Here's our solution:
<div id="tableContainer">
<div id="tableRow">
<section id="drinks">
...
</section>
<section id="main">
...
</section>
<aside>
...
</aside>
</div> <!-- tableRow -->
</div> <!-- tableContainer -->
Al
l we d
id w
as re
place
<d
iv>s w
ith
<sect
ion>s
fo
r “dr
inks”
and
“main
”.
We
left the ids there
beca
use we need to be
able
to uniquely identify
each
<section> to style it
.
section#drinks {
display: table-cell;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}
A
nd here
's the
page! L
ooks
e
xactly
the sam
e, but
don't
y
ou feel
better
knowin
g
y
ou've go
t new
HTML5
e
lements
in plac
e?
section#main {
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
vertical-align: top;
}
