Hi,
As others have said you can’t really lay pages out like that with disparate elements absolutely placed as they have no relationship between each other and you can’t maintain the flow of the document.
You need to create your min and max page by using your wrapper element and then containing all content inside (apart form the sticky footer which I think you made a misguided attempt at :)).
As your main image is 780px wide then your min width will need to be 780pc as there is no point going smaller. The max -wdith can be what you want but I wouldn’t let it go past 1200px though as line become unreadable.
Your design is really a fixed width design so converting it to a fluid with doesn’t make a lot of sense unless you can make some design changes. The home page for example is just a selection of fixed width elements and will not benefit form a fluid width. The about page has some more text which will benefit for being fluid though.
Here is s very quick and rough example of how to begin conversion.
The home page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home of Shawna Lynn</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/shawnlynn.css" type="text/css" media="screen">
<style type="text/css">
/* layout.css */
* {
padding: 0;
margin :0;
}
a img{border:none}
h2 {
font-size: 2em;
text-align: centre;
margin:0 0 1em;
}
p {
color: #000000;
font-size: 16px;
text-align: justify;
word-spacing: 1.5pt;
margin:0 0 1em
}
html, body {
height:100%;
}
body {
background:#eee;
font-size: 12px;
font-family: "Trebuchet MS", sans-serif;
}
/*Opera Fix for sticky footer*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
.wrapper:after {
clear:both;
display:block;
height:1%;
content:" ";
}
.wrapper {
min-height: 100%;
margin: -92px auto 0;
max-width:1180px;
min-width: 780px;/* header image width */
/*height: 410px; never do this as content can't grow*/
padding: 0;
text-align: center;
clear:both;
background:#fff;
}
* html .wrapper {
height:100%;/*IE6 fix*/
}
#header {
background: #fff;
border-top:102px solid #fff;
}
/**Navigation**/
#navlist {
width:100%;
margin:0 auto 20px;
list-style-type: none;
font-size: 14px;
text-align:centre;
border-bottom:1px solid #000;
padding:0 0 5px;
}
#navlist li {
display: inline;
font-size: 1.25em;
}
#navlist a {
padding: 3px 15px;
}
#navlist a:link, #navlist a:visited {
color: #00ccff;
}
#navlist a:hover {
color: #00ffff;
}
/**Navigation**/
#maincontent {
clear:both;
width:100%;
}
#maincontent p {
margin:0 1em
}
/* footer */
#footer {
text-align: centre;
max-width:1180px;
min-width: 780px;/* header image width */
border-top:1px solid #000;
padding:1px 0 10px;
height:80px;
margin:auto;
background:#fff;
}
#footer p {
margin:10px 0 0;
color: #000000;
text-align:center;
}
.intro {
width:600px;
margin:0 auto;
padding:1px 0 10px;
}
.intro p.goldlinep {
text-align:centre;
font-size: 1.25em;
word-spacing: 1pt;
}
.goldimage {
text-align:center
}
#colordiff {
background-color: #9a32cd;
}
.colordiffp {
background-color: #fffacd;
}
/* All Pages */
.centtable {
width:90%;
text-align: justify;
font-family: "Trebuchet MS", Arial, sans-serif;
margin:auto;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 id="header"><img src="http://lynnfolio.cz.cc/w3c/images/headerlynn.png" alt="Shawna Lynn Logo" title="Shawna Lynn Creative Initiatives"></h1>
<!-- end of header div-->
<ul id="navlist">
<li><a href="index.html" title="Home">Home</a>|</li>
<li><a href="about.html" title="About me">About Me</a>|</li>
<li><a href="blog.html" title="Blog">Blog</a>|</li>
<li><a href="services.html" title="services">Services</a>|</li>
<li><a href="clients.html" title="Clients">Clients</a>|</li>
<li><a href="contact.html" title="contact me">Contact Me</a></li>
</ul>
<div id="maincontent">
<h2><img src="http://lynnfolio.cz.cc/w3c/images/celebration.png" title="Celebration Time" alt="Celebration Time"></h2>
<div class="intro">
<p>You have just struck gold! </p>
<p class="goldimage"><img src="http://lynnfolio.cz.cc/w3c/images/gold-mine-icon.png" title="gold mine image" alt="gold mine image"></p>
<p>A Standards-Compliant Website design like this is your personal Goldmine<br>
Why not reap the benefits?!</p>
</div>
</div>
<!--end of maincontent div-->
</div>
<div id="footer">
<p>Copyright 2011- Shawna Lynn Creative Initiatives. Some images may be subject to copyright.</p>
<p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lynnfolio.cz.cc/w3site/" target="_blank"><img src="http://lynnfolio.cz.cc/w3c/validation/valid-html401-blue.png" title="valid html" alt="valid html"> </a> <img src="http://lynnfolio.cz.cc/w3c/validation/vcss-blue.gif" title="valid css" alt="valid css"></p>
</div>
<!-- end of footer div-->
</body>
</html>
I’ve put the css in the head so you can just copy that html, save it and then view it in a browser while online and you can see how it looks. The css should of course be removed to external css files but I see no need for the CSS two files that you had as they were a mixed bag of rules.
Here is the about page which uses the same css as above.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home of Shawna Lynn</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/shawnlynn.css" type="text/css" media="screen">
<style type="text/css">
/* layout.css */
* {
padding: 0;
margin :0;
}
a img{border:none}
h2 {
font-size: 2em;
text-align: centre;
margin:0 0 1em;
}
p {
color: #000000;
font-size: 16px;
text-align: justify;
word-spacing: 1.5pt;
margin:0 0 1em
}
html, body {
height:100%;
}
body {
background:#eee;
font-size: 12px;
font-family: "Trebuchet MS", sans-serif;
}
/*Opera Fix for sticky footer*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
.wrapper:after {
clear:both;
display:block;
height:1%;
content:" ";
}
.wrapper {
min-height: 100%;
margin: -92px auto 0;
max-width:1180px;
min-width: 780px;/* header image width */
/*height: 410px; never do this as content can't grow*/
padding: 0;
text-align: center;
clear:both;
background:#fff;
}
* html .wrapper {
height:100%;/*IE6 fix*/
}
#header {
background: #fff;
border-top:102px solid #fff;
}
/**Navigation**/
#navlist {
width:100%;
margin:0 auto 20px;
list-style-type: none;
font-size: 14px;
text-align:centre;
border-bottom:1px solid #000;
padding:0 0 5px;
}
#navlist li {
display: inline;
font-size: 1.25em;
}
#navlist a {
padding: 3px 15px;
}
#navlist a:link, #navlist a:visited {
color: #00ccff;
}
#navlist a:hover {
color: #00ffff;
}
/**Navigation**/
#maincontent {
clear:both;
width:100%;
}
#maincontent p {
margin:0 1em
}
/* footer */
#footer {
text-align: centre;
max-width:1180px;
min-width: 780px;/* header image width */
border-top:1px solid #000;
padding:1px 0 10px;
height:80px;
margin:auto;
background:#fff;
}
#footer p {
margin:10px 0 0;
color: #000000;
text-align:center;
}
.intro {
width:600px;
margin:0 auto;
padding:1px 0 10px;
}
.intro p.goldlinep {
text-align:centre;
font-size: 1.25em;
word-spacing: 1pt;
}
.goldimage {
text-align:center
}
#colordiff {
background-color: #9a32cd;
}
.colordiffp {
background-color: #fffacd;
}
/* All Pages */
.centtable {
width:90%;
text-align: justify;
font-family: "Trebuchet MS", Arial, sans-serif;
margin:auto;
}
</style>
</head>
<body>
<div class="wrapper">
<h1 id="header"><img src="http://lynnfolio.cz.cc/w3c/images/headerlynn.png" alt="Shawna Lynn Logo" title="Shawna Lynn Creative Initiatives"></h1>
<!-- end of header div-->
<ul id="navlist">
<li><a href="index.html" title="Home">Home</a>|</li>
<li><a href="about.html" title="About me">About Me</a>|</li>
<li><a href="blog.html" title="Blog">Blog</a>|</li>
<li><a href="services.html" title="services">Services</a>|</li>
<li><a href="clients.html" title="Clients">Clients</a>|</li>
<li><a href="contact.html" title="contact me">Contact Me</a></li>
</ul>
<div id="maincontent">
<h2><img src="http://lynnfolio.cz.cc/w3c/images/about-me-img.png" title="About Shawna Lynn" alt="About Shawna Lynn"></h2>
<div class="centtable">
<p> I am a formally trained IT Professional. The field of IT is too exciting to be confined by any one area therefore I share my passion between website designing and content management. I am also a general computer personnel (Hardware and Software).
I am blessed with creativity and I understand the power of words. As a designer I believe that it is important that the creative process be an interactive one between the client and myself. The more of a person’s ideas and views that I can incorporate in their work, the more likely that they will be pleased with the finished product.
Although I enjoy the world of computers, I also enjoy physical interaction and activity: whether its spending time with people or beta testing games and software. I keep in tune with the world around me and I’m always open for new jobs. </p>
</div>
</div>
<!--end of maincontent div-->
</div>
<div id="footer">
<p class="footerp">Copyright 2011- Shawna Lynn Creative Initiatives. Some images may be subject to copyright.</p>
<p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lynnfolio.cz.cc/w3site/" target="_blank"><img src="http://lynnfolio.cz.cc/w3c/validation/valid-html401-blue.png" title="valid html" alt="valid html"> </a> <img src="http://lynnfolio.cz.cc/w3c/validation/vcss-blue.gif" title="valid css" alt="valid css"></p>
</div>
<!-- end of footer div-->
</body>
</html>
Everything is back in the flow and each element follows the next. Refer to the sticky footer faq in the CSS faq for how the footer works.
These examples are only meant as a guide and could do with tidying up more. The image headings for example should really be done using image replacement techniques such as the gilder/levin method to get some real text into the html.
Lastly don’t use blockquotes unless you are quoting text that someone said. You have wrapped a number of elements in the blockquote tag but that’s not what it is used for. Use the correct element for the job in hand and a blockquote is only used when quoting someone.
Hope it helps anyway 
