Ok - You finally added the closing div for #wrap but you did not move the footer base to the correct place and it is still misplaced. I’ve shown you a number of times now - I’ve lost count.
Why have you also removed the clearfix code? Was there a reason that you did that?
The floats will not be cleared when you move that footer base element to the correct place and your background will disappear.
Lastly you have increased the widths of your columns but not increased the parent to compensate.
Here is one last attempt.
The code is valid and all elements are placed correctly (or as correct as I can tell from what you have asked) .
<!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>Page Title</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="http://www.thecreativesheep.ca/pagehome/reset.css" rel="stylesheet" media="screen, projection" type="text/css">
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<style type="text/css">
body {
line-height:1.2;
background:#afabac url(http://www.thecreativesheep.ca/pagehome/images/bg.gif) repeat-x 0 0;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
text-align:center;
padding:25px 0 20px;
}
#wrap {
width:800px;
margin:auto;
text-align:left;
}
#maincol {
width:800;
background: url(http://www.thecreativesheep.ca/pagehome/images/middle.gif) repeat-y 4px -200px;
}
#content {
width:370px;
padding:1px 10px 1px 60px;
text-align:left;
min-height:400px;
float:left;
}
* html #content {
height:400px
}
#content p {
margin:0 0 1em;
line-height:1.5;
}
.content_boxes {
background-color: #0000CC;
width: 300px;
overflow: hidden;
}
.top, .base {
background:url(http://www.thecreativesheep.ca/pagehome/images/top.gif) no-repeat 0 0;
clear:both;
width:520px;
height:23px;
}
.base {
background:url(http://www.thecreativesheep.ca/pagehome/images/base.gif) no-repeat 0 0;
clear:both;
width:525px;
height:28px;
margin:0 0 0 20px
}
.bg_sidebar {
background-color: #3300FF;
height: 250px;
margin: 120px 0 0;
width: 200px;
}
#sidebar {
float: right;
background:#f2f2f2;
width:358px;
margin-top:27px 0 0;
background-color: #99FF00;
}
#header {
width:528px;
height:236px;
background:url(http://www.thecreativesheep.ca/pagehome/images/header_02.jpg) no-repeat 3px 0;
position:relative;
}
#masterhome {
position: relative;
top: 60px;
left: 85px;
width: 125px;
height: 125px;
}
#masterhome a {
display:block;
width:125px;
height:125px;
background:red;/* just for testing*/
}
ul#nav {
position:absolute;
top:180px;
left:225px;
margin:0;
z-index:75;
}
#searchbox {
background-color: #FF0033;
height: 17px;
width: 187px;
z-index: 99;
float:right;
margin:85px 70px 0 0;
display:inline;
clear:both;
}
#nav li, #nav li a {
width:60px;
height:25px;
float:left;
position:relative;
}
#nav li.about {
width:70px;
margin-top:-7px;
}
#nav li.about a {
width:70px;
}
#nav li.back {
width:142px;
margin:-18px 0 0;
}
#nav li.basepage {
width:130px;
height:90px;
}
#nav li.basepage a {
width: 100px;
height:100px;
}
#nav li.back a {
width:142px;
}
#nav li.back a:hover {
background:green url(http://www.thecreativesheep.ca/pagehome/headerhover.jpg) -352px -162px;
}
#nav li a span {
position:absolute;
left:-99em;
top:-999em
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \\*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide */
</style>
<!--[if lte IE 7]>
<link href="iecss.css" rel="stylesheet" media="screen,projection" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" media="screen,projection" type="text/css">
<![endif]-->
<!--[if lt IE 7]>
<script type="text/javascript" src="http://www.thecreativesheep.ca/pagehome/js/iehover.js"></script>
<![endif]-->
</head>
<body id="home">
<div id="wrap">
<div id="header">
<h1><span class="hide">WIP Creative Biology of animation</span></h1>
<div id="masterhome"><a href="#"></a></div>
<ul id="nav">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About Me</span></a></li>
<li class="back"><a href="#"><span>Back(News news)</span></a></li>
<li class="basepage"><a href="#"><span>BasePage</span></a></li>
</ul>
<div id="searchbox"></div>
</div>
<div id="maincol" class="clearfix">
<div id="content">
<div class="content_boxes">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
</div>
</div>
<div id="sidebar">
<div class="bg_sidebar">
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
<p>Sidecolumn</p>
</div>
</div>
</div>
<div class="base"></div>
</div>
</body>
</html>
Use all of the code above or none of it. Don’t pick and choose bits as you keep omitting vital ingredients.
You can of course adjust and tweak as necessary but keep the correct structure in place and if you increase the width of the children then make sure it still fits in the parent.