HTML and CSS Reference
In-Depth Information
The Starbuzz CEO has decided to add a drinks menu
column to the Starbuzz Coffee web page. He wants
the new column to go on the left side, and be 20% of
the width of the browser window. Your job is to add the
new HTML to the existing page in the correct position,
and then finish up the CSS below to make sure it
displays as a table cell, like the other two columns do.
Here's our solution.
<div id="tableContainer">
<div id="tableRow">
<div id="drinks">
<h1>BEVERAGES</h1>
<p>House Blend, $1.49</p>
<p>Mocha Cafe Latte, $2.35</p>
<p>Cappuccino, $1.89</p>
<p>Chai Tea, $1.85</p>
<h1>ELIXIRS</h1>
<p>
We proudly serve elixirs brewed by our friends
at the Head First Lounge.
</p>
<p>Green Tea Cooler, $2.99</p>
<p>Raspberry Ice Concentration, $2.99</p>
<p>Blueberry Bliss Elixir, $2.99</p>
<p>Cranberry Antioxidant Blast, $2.99</p>
<p>Chai Chiller, $2.99</p>
<p>Black Brain Brew, $2.99</p>
</div>
<div id="main">
...
Th
e n e
w C
S S …
yo u
n e e d
to
f i n i
sh it
u p !
#drinks {
____________;
background-color: #efe5d0;
width: 20%;
padding: 15px;
vertical-align: top;
}
display: table-cell
