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 id="main">
</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;
Search WWH ::

Custom Search