Creating a 2 column CSS layout may seem simple based on what is taught in class, but the reality can be quite different. The textbook explains how to make the Nav column float left, however, it doesn't always extend all the way down the page as illustrated in their example, although it does align properly in the upper left corner.
CSS:
body{
background-color: #ffffff;
color: #666666;
font: sans-serif;
background-image: url(background.jpg);
}
header{
background-color: #000033;
color: #ffffff;
font: sans-serif;
}
nav{
float: left;
width: 90px;
position: absolute;
background-color: #90c7e3;
text-decoration: none;
font-weight: bold;
padding: 5px;
}
main{
display: block;
}
h1{
line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72 px;
margin-bottom: 0;
}
h2
{
color: #3399cc;
font: serif;
}
h3
{
colo...
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="pacific.css">
<title>Pacific Trails Resort</title>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="yurts.html">Yurts</a>
<a href="activities.html">Activities</a> &npb;
<a href="reservations.html">Reservations</a>
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
888-555-5555<br>
</div>
</main>
<footer>
<div id="footer">
Copyright © 2016 Pacific Trails Resort<br>
</div>
</footer>
...