Hi,
Your page has a lot of deprecated markup which is the reason your using a transitional doctype. These days when your building new pages it is strongly encouraged to break away from those and use strict doctypes. That will help you learn to write valid up to date code.
I went ahead and set up your left column with that info div and cleaned your page up. I set up your left nav and footer links as list items in a UL, that way you are able to style them with margins/paddings instead of using spacer divs like you were doing.
These should work out much better for you:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pic-n-Color - Convert your photographs into coloring pages!</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="container">
<div id="header">
<a href="index.html"></a>
</div>
<div id="left">
<ul id="nav">
<li>
<a href="index.html">
<img src="images/BTN_HomeX.png" title="Pic-n-Color Home" alt="Convert your photographs to coloring pages with Pic-n-Color">
</a>
</li>
<li>
<a href="about.html">
<img src="images/BTN_About.png" title="About Pic-n-Color" alt="Learn about converting photographs into coloring pages with Pic-n-Color">
</a>
</li>
<li>
<a href="gallery.html">
<img src="images/BTN_Gallery.png" title="Pic-n-Color Gallery" alt="Examples of photographs converted to coloring pages using Pic-n-Color">
</a>
</li>
<li>
<a href="contact.html">
<img src="images/BTN_Contact.png" title="Contact Pic-n-Color" alt="Contact Pic-n-Color to learn more about making coloring pages out of photographs">
</a>
</li>
</ul>
<div id="info">
<p>Info div here</p>
<p>Info div here</p>
<p>Info div here</p>
<p>Info div here</p>
</div>
</div>
<div id="arrow"></div>
<div id="main">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit urna, aliquam sit amet volutpat eu, consectetur
non purus. In ut dui quam. Donec velit dolor, fermentum eu tincidunt tincidunt, commodo quis massa. Praesent
vulputate massa ac urna lobortis a feugiat libero hendrerit. Pellentesque a tortor sem, elementum ultrices sapien.
Aenean mi odio, blandit vitae eleifend sed, ultricies nec sapien. Proin eu nisi quam. Quisque bibendum ante
sollicitudin mi consequat auctor. Vestibulum elementum suscipit magna, id egestas felis dapibus in. Curabitur s
celerisque congue dapibus. Aliquam ut nibh velit, quis lacinia tellus.</p>
<p>Donec luctus elementum nibh, tempor pretium ipsum vehicula id. Donec sapien eros, aliquam eget congue eu,
dapibus at sapien. Proin tincidunt, leo nec sagittis elementum, neque augue commodo ipsum, quis facilisis augue
sem vitae nulla. Curabitur eget metus nulla, at porttitor sem. Etiam posuere, lectus in iaculis ultricies, turpis justo
tristique tellus, sed tempus leo justo pharetra enim. Fusce vitae tortor sem, non ornare diam. Aenean dignissim
eros eu turpis semper nec faucibus metus sodales. Sed sapien sem, iaculis sed viverra at, egestas sit amet leo.
Proin at orci eget risus facilisis tristique vitae eget risus. Vestibulum a velit tortor, sit amet interdum tortor.</p>
</div>
</div>
</div>
<div id="footer">
<ul id="footnav">
<li><a href="index.html">Home</a>|</li>
<li><a href="about.html">About</a>|</li>
<li><a href="gallery.html">Gallery</a>|</li>
<li><a href="purchase.html">Purchase</a>|</li>
<li><a href="contact.html">Contact</a>|</li>
<li> Web Design by <a href="http://www.mverminski.com">Mike Verminski</a></li>
</ul>
</div>
</body>
</html>
And here is the CSS that goes with that revised html
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: url(../images/IMG_BGPattern.png);
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
img, fieldset {
border: none;
}
#container {
width: 800px;
min-height: 100%;
margin: -83px auto 0;
background-color: #feeb45;
border: solid #000;
border-width: 0 1px;
overflow: hidden;
}
* html #container {height:100%;} /*min-height for IE6*/
#header {
width: 800px;
height: 140px;
border-top: 83px solid red;/*reclaim negative top margin on container*/
background-image: url(../images/IMG_Header.png);
}
#header a {
display: block;
width: 451px;
height: 80px;
margin: 38px 0px 0px 22px;
}
#left {
width: 142px;
padding-top: 12px;
float: left;
}
ul#nav {
width: 100%;
overflow: hidden;
}
#nav li {
display: block;
padding: 0 0 5px 0;
}
#nav a {
display: block;
text-decoration: none;
}
#nav img {
vertical-align: bottom;
}
#info {
width: 100%;
padding: 1px 0;
background: orange;
}
#info p {
margin: 10px;
font: 12px/1.3 Arial, Helvetica, sans-serif;
}
#arrow {
float: left;
width: 106px;
height: 135px;
margin: 23px 0 0;
background: lime url(../images/IMG_ArrowRed.png) no-repeat;
}
#main {
float: left;
width: 470px;
margin: 33px 0 20px;
background: #e20a0a url(../images/IMG_RedTop.png) no-repeat;
}
#content {
width: 430px;
padding: 130px 20px 29px 20px;
font: 12px/1.3 Arial, Helvetica, sans-serif;
color: #FFF;
background: url(../images/IMG_RedBottom.png) no-repeat 0 100%;
}
#footer {
width: 800px;
height: 83px;
margin: 0 auto;
overflow: hidden;
background: url(../images/IMG_Footer.png) no-repeat;
border: solid #000;
border-width: 0 1px;
}
ul#footnav {
margin-top: 55px;
font: 12px/1.3 Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
#footnav li {
display: inline;
margin: 0 2px 0 0;
}
#footnav a {
margin: 0 5px 0 0;
}
