Hi Ryan,
Sorry I missed your post 
As the other Ryan said you need to clear the header or the side columns snag.
There are also a couple of other tweaks you need.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Three column layout</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<style>
/* CSS reset */
body,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,dl,dt,dd,ol,ul,li,fieldset,form,legend,table,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
list-style: none;
font-family: sans-serif;
}
/* Header */
header {
float: left;
width: 100%;
height: 100px;
background: #ccc;
text-align: center;
}
/* Content */
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 400px;
}
* html .wrapper {
width: 760px; /* Gives IE6 a fixed width (since it doesn't support max-width or min-width) */
}
#inner{
margin-left: 130px;
margin-right: 130px;
background: pink;
clear:both;
min-height:0;/* ie7*/
position:relative;
}
* html #inner{
zoom:1.0;
}
aside {
position: relative; /* IE7 and older need this to show float */
padding: 10px;
width:110px;
}
#aside-1 {
float: left;
margin-left: -130px; /* Must be 1px less than width */
background: yellow;
}
#aside-2 {
float: right;
margin-right: -130px; /* Must be 1px less than width */
background: orange;
}
/* Article */
article {
padding: 20px;
overflow:hidden;
zoom:1.0;
}
/* Header */
footer {
float: left;
width: 100%;
height: 100px;
background: #000;
color: #fff;
text-align: center;
}
/* Post contents */
.aligncenter {
margin: 0 auto;
display: block;
}
p {
margin: 10px 0;
}
</style>
<!--[if lt IE 9]><script src="http://demo.pixopoint.com/static/3col/html5.js" type="text/javascript"></script><![endif]-->
</head>
<body>
<header>This is the header :)</header>
<div class="wrapper">
<div id="inner">
<aside id="aside-1">
<p>This is sidebar #1</p>
<p>This is sidebar #1</p>
<p>This is sidebar #1</p>
<p>This is sidebar #1</p>
</aside>
<aside id="aside-2">
<p>This is sidebar #2</p>
<p>This is sidebar #2</p>
<p>This is sidebar #2</p>
<p>This is sidebar #2</p>
</aside>
<article>
<h1>Content</h1>
<p>Major bugs now fixed :)</p>
<p>Major bugs now fixed :)</p>
<p>Major bugs now fixed :)</p>
<img class="aligncenter" src="http://www.familyguyquotes.com/images/stewie.gif" alt="Stewie Griffin" ?>
<p>Information about this can be found in the <a href="http://www.sitepoint.com/forums/showthread.php?t=728734">SitePoint CSS forum</a>.
</article>
</div>
</div>
<footer>This is the footer :)</footer>
</body>
</html>
You can’t use the 100% heights on the inner elements because if they were working then they would be too high anyway.
The side floats should have a width that matches the side margins and once the header is cleared the negative margin can be exact and not one pixel out. It’s only older Firefox (about 1.5) that need the 1px overlap.
The middle content needs to have overflow:hidden applied or some other block formatting context (display:inline-block or float) otherwise any elements in the middle that have clear:both applied to will clear the side columns also.
Ie7 needs position:relative added in a couple of places and IE needs haslayout where I have used zoom but you can use something else if you don’t like zoom (but if you use height:1% then also add overflow:visible just in case.)
As you aren’t using the equal columns you could have just used a basic 3 column float without negative margins and saved a little complexity (although the negative margin layout seems to be more robust that normal floats at times). You can even float 3 columns when the center column is fluid but it’s a little trickier.
Paul’s original demo mentioned requiring 1px less to shunt the footer down, but my footer was sitting in place just fine (possibly because it’s totally separated from the other code unlike in Paul’s code).
Gracias, most of my learning was due to Paul, so thanks are due to him.