I posted a query on here a few days ago, but with my recent changes I feel like I should repost this and change the details up a little bit. The problem that I am having is with my css. the header positions on top of the page (like it should) and the footer at the bottom (like it should) and the Rgutter is positioned on the sharp right (like it should) as well the Lgutter. When I place content in the middle of the page, either it over flows past the footer (like it shouldnt) or it jumps past the footer and displays past the footer (like it shouldnt). What i need this to do is reformat everything that is inside of the wrapper div (which is all of the pages content) and not over flow past the footer.
I'm not sure what my problem is, I do not know what I am doing wrong with this. But things in this page do not resize like they should and they over flow past or over the footer.
Can anyone help me out with his?
below are the codecs i've used:
*here is the html*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.home.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="headerwrap">
<div id="header">
header
</div>
</div>
<div id="middlewrap">
<div id="Lgutter">
<p>Home<br />
Contents<br />
Credits</p>
</div>
<div id="Rgutter">
<img src="Advertising.gif" width="100%" height="100%" />
</div>
<div id="middle">
<div id="content">
<img src="cover.jpg" width="600" height="800" />
</div>
</div>
</div>
<div id="footerwrap">
<div id="footer">
testing
</div>
</div>
</div>
</body>
</html>
*here is the css*
html, body
{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
body
{
min-width: 600px;
width: 100%;
height: 100%;
margin: 0 auto;
}
.wrapper
{
margin: 0 auto;
float: left;
position: fixed;
width: 100%;
height: 100%;
}
div#headerwrap
{
width:100%;
top: 0;
left: 0;
height: auto;
}
div#header
{
height:auto;
width:100%;
float: left;
margin: 0 auto;
}
div#middlewrap
{
min-width: 800px;
width: 100%;
height: 100%;
float:left;
margin: 0;
}
#Lgutter
{
float:left;
position: absolute;
clear:both;
position:0 0;
display: table;
min-width:150px;
min-height: 600px;
width:10%;
height: 90%;
margin: 0 0 0 0;
}
#Lgutter p{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:16px;
}
#Rgutter
{
text-align:right;
float: right;
clear:right;
margin:0 0 0 0;
min-width:100px;
min-height: 600px;
border-left-width:20px;
width: 13%;
height: 90%;
}
#middle
{
min-width:600px;
vertical-align:middle;
height: auto;
}
#content
{
min-width:500px;
vertical-align:middle;
width:100%;
min-height: 400px;
text-align: center;
}
div#footerwrap
{
width: 100%;
padding-top:100px;
position: absolute;
bottom: 0;
left: 0;
height: auto;
}
body>div#footerwrap
{
position:fixed;
}
div#footer
{
height: auto;
width: 100%;
margin: 0 auto;
background-color: #D7D9D7;
}
img {
max-width: 100%;
max-height: 100%;
}
<!--[if IE]><style type="text/css">
img,
p {
width: 100%;
height: 100%;
}
</style><![endif]-->
Before you post, read our: 
I learned right here in CodingForums.com, and some other forums as well. I've never taken a class or read a book on this stuff. From what I've seen both books and teachers are completely outdated compared to what you can learn in these forums which, as far as I'm concerned, makes them pretty much a waste of money and time.
