Forums

surelock

One quick question I am (I am a noob at this CSS stuff also but what I have garnered so far is that it is incredibly powerful and almost but not quite instinctive) having trouble with my columns separating from my headers (and sometimes the footers as well). If I put a border around them they will usually stay put, but I do not always want a border around them. The URL is http://www.back40internetinnovators.com ... index3.htm .
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>
<title>Home Page</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<link rel=\"stylesheet\" href=\"styles.css\" type=\"text/css\" />
<link href=\"p7epm/epm5/p7EPM05.css\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"style2.css\" />
<script type=\"text/javascript\" language=\"javascript\" src=\"script.js\"></script>
<script type=\"text/javascript\" src=\"p7epm/p7EPMscripts.js\"></script>
</head>
<body onload=\"menuSlider.init('menu','slide')\">

<div id=\"header\">
	<h2>the puzzle boy</h2>
    <h3>how we live with autism</h3>
</div>
<div id=\"slice\">
	<div class=\"menu\">
    <ul id=\"menu\">
        <li><a href=\"http://back40internetinnovators.com/wordpress/\">blog</a></li>
        <li value=\"1\"><a href=\"#\">Home</a></li>
        <li><a href=\"#\">forums</a></li>
        <li><a href=\"#\">video</a></li>
        <li><a href=\"#\">photo gallery</a></li>
    </ul>
    <div id=\"slide\"></div>
</div>
</div>
<div id=\"wrapper\">
    <div id=\"lcol\">
    <p>&nbsp;</p>
	<a href=\"http://www.back40internetinnovators.com/wordpress\"><div id=\"lcolback\">
    <p>&nbsp;</p>
    <p align=\"center\"><img src=\"images/theclayburns.jpg\" alt=\"The Clayburns\" border=\"0\" /></p>
    <p align=\"center\"><strong>Family Journal</strong></p>
    <p align=\"center\">The family hikes in Yosimite</p>
    <p align=\"center\">Read more ...</p>
    <p>&nbsp;</p>
    </div></a>
    <p align=\"center\">&nbsp;</p>
    <a href=\"#\"><div id=\"lcolback\">
      <p>&nbsp;</p>
      <p align=\"center\"><strong>Healthy Teachings:</strong></p>
      <p align=\"center\"><strong>Nancy Clayburn shares</strong></p>
      <p align=\"center\"><strong>her health wisdom</strong></p>
      <p align=\"center\"><strong>gathered through years</strong></p>
      <p align=\"center\"><strong>of patient research.</strong></p>
      <p align=\"center\">Read <span class=\"style4\">more ...</span></p>
      <p>&nbsp;</p>
    </div></a>
    </div>
  <div id=\"rcol\">
  <p>&nbsp;</p>
  <p align=\"center\"><img src=\"images/thebook.jpg\" alt=\"The Puzzle Boy - by Nancy Clayburn\" /><br />
    Order your copy now of this tale of love and willful triumph  for just $19.95*</p>
    <span class=\"style3\">Or you can download this book as a pdf file and have it today*</span>
  </div>
	<div id=\"contents\">
    <h3>We can help YOU!</h3>
    After many years of searching and sifting, this family began to unravel the emotional trauma brought on by their son's <em>autism</em> and <em>grand mal seizures</em> from 7 months old until today at 21 years old.  So compelling were their experiences that the Puzzle Boy's motherwrote a book that shares her personal journey of tragedy, trial, and triumph.  Even beyond the book they share here, what they learn as they live everyday with <em>autism</em>.
    <p>&nbsp;</p>
    <div id=\"p7EPM_1\" class=\"p7EPM05\" align=\"left\">
                      <div id=\"p7EPMt_1\" class=\"p7epm_trigs\" align=\"left\">
                        <ul>
                          <p align=\"left\"><li class=\"t1\"><a href=\"#p7EPMc1_1\" id=\"p7EPMtrg1_1\">The Power of Hope</a></li></p>
                          <div id=\"p7EPMdw_1\">
                        <div id=\"p7EPMw1_1\" class=\"p7epm_cwrapper\">
                          <div id=\"p7EPMc1_1\" class=\"p7epm_content pan1\">
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut, fermentum congue, pharetra eu, massa. Suspendisse potenti. Morbi commodo mauris. Ut at pede. Ut id nisi. Donec scelerisque urna quis ligula. Praesent est. Vestibulum scelerisque. Curabitur quam. Fusce rhoncus pellentesque ipsum. Aenean venenatis metus ac quam. Maecenas lacus lacus, sagittis vitae, congue at, euismod eu, urna. Maecenas vitae purus. Praesent eros lectus, porta et, semper nec, molestie eget, tortor.</p>
                          </div>
                        </div>
						  <p align=\"left\"><li class=\"t2\"><a href=\"#p7EPMc1_2\" id=\"p7EPMtrg1_2\">The Power of Peace</a></li></p>
                          <div id=\"p7EPMw1_2\" class=\"p7epm_cwrapper\">
                          <div id=\"p7EPMc1_2\" class=\"p7epm_content pan2\">
                            <p>Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, eu feugiat nulla at vero eros et accumsan et odio  qui blandit praesent luptatum augue duis dolore te feugait nulla facilisi.</p>
                            <p>Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, eu feugiat nulla at vero eros et accumsan et odio  qui blandit praesent luptatum augue duis dolore te feugait nulla facilisi.</p>
                          </div>
                        </div>
						  <p align=\"left\"><li class=\"t3\"><a href=\"#p7EPMc1_3\" id=\"p7EPMtrg1_3\">The Power of Love</a></li></p>
                          <div id=\"p7EPMw1_3\" class=\"p7epm_cwrapper\">
                          <div id=\"p7EPMc1_3\" class=\"p7epm_content pan3\">
                            <p>Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.</p>
                            <p>Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. </p>
                          </div>
                        </div>
						  <p align=\"left\"><li class=\"t4\"><a href=\"#p7EPMc1_4\" id=\"p7EPMtrg1_4\">The Power to Accept</a></li></p>
                          <div id=\"p7EPMw1_4\" class=\"p7epm_cwrapper\">
                          <div id=\"p7EPMc1_4\" class=\"p7epm_content pan4\">
                            <p>Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.</p>
                            <p>Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, eu feugiat nulla at vero eros et accumsan et odio  qui blandit praesent luptatum augue duis dolore te feugait nulla facilisi.</p>
                            <p>Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.</p>
                          </div>
                        </div>
						  <p align=\"left\"><li class=\"t5\"><a href=\"#p7EPMc1_5\" id=\"p7EPMtrg1_5\">The Power to Embrace</a></li></p>
                          <div id=\"p7EPMw1_5\" class=\"p7epm_cwrapper\">
                          <div id=\"p7EPMc1_5\" class=\"p7epm_content pan5\">
                            <p>Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut. Duis autem vel eum iriure. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. </p>
                          </div>
                        </div>  
						  <p align=\"left\"><li class=\"t6\"><a href=\"#p7EPMc1_6\" id=\"p7EPMtrg1_6\">The Power to Move Ahead Against All Odds</a></li></p>
                        <div id=\"p7EPMw1_6\" class=\"p7epm_cwrapper\">
                          <div id=\"p7EPMc1_6\" class=\"p7epm_content pan6\">
                            <p>Lorem ipsum dolor sit amet, contuer adiping elit, sed diam nonummy nibh euismod.</p>
                            <p>Lorem ipsum dolor sit amed sed diam nonummy nibh euismod tincidunt ut.</p>
                            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id, mattis id, sapien. </p>
                          </div>
                        </div>
                      </div>
                        </ul>
                        <div class=\"p7epm_ie5clear\">&nbsp;</div>
                      </div>
                      <!--[if IE 5]><style>.p7epm_trigs a {height: 1%;}.p7epm_ie5clear {clear: both;}</style><![endif]-->
                      <!--[if IE 6]><style>.p7epm_trigs, .p7epm_trigs a {height: 1%;}</style><![endif]-->
                      <script type=\"text/javascript\">
<!--
P7_opEPM('p7EPM_1',0,1,1,1,0,1000,0);
//-->
                    </script>
                    </div>
                      <p>&nbsp;</p>
                      
    </div>	
</div>
<br class=\"clearfloat\" />
<div id=\"footer\">
This site created and maintained by <a href=\"http://www.back40internetinnovators.com\">Back 40 Internet Innovators</a></div>

</body>
</html>

And here is the CSS:

@charset \"utf-8\";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	background: #C0DFFD;
	font: Verdana, Arial, Helvetica, sans-serif;
	color: black;
	}
	#wrapper {
	margin: 0;
	padding: 0;
	background:#C0DFFD;
	height: auto;
	width: 94%;
	}
	.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a 	   container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
	
	#header {
	margin: 0;
	padding: 1em;
	width:97.5%;
	height:120px;
	background: #3366cc url(images/clouds.png) no-repeat;
    }
		#header h1 {
	margin:.8em 0 .2em 0;
	padding:6px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #ccff99 ;
    }
		#header h2 {
	margin:.8em 0 .2em 0;
	padding:3px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #ccff99;
	position: absolute;
	left: 265px;
	top: -24px;
	height: 24px;
    }
		#header h3 {
	margin:.8em 0 .2em 0;
	padding:3px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #ccff99;
	position: absolute;
	left: 262px;
	top: 7px;
	width: 310px;
    }
	#slice {
	margin:0;
	padding: 1px;
	border-top: solid #ccff99 1px;
	border-bottom: solid #ccff99 1px;
	text-align:center;
	background:#ccff99 url(images/slbg.jpg) repeat-x;
	width:99.9%;
	height:34px;
	}

	#contents {
	margin: 0 ;
	padding:0 6px 0 6px;
	/*border:dashed black thin;*/
	background:#C0DFFD;
	height:1000px;
	font-family:small Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	}
		#contents h1 {
	margin:.8em 0 .2em 0;
	padding:6px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #3366cc;
	text-align:center;
    }
		#contents h2 {
	margin:.8em 0 .2em 0;
	padding:3px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #3366cc;
	text-align:center;
	}
		#contents h3 {
	margin:.8em 0 .2em 0;
	padding:3px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #3366cc;
	text-align:center;
	}
	#contents h4 {
	margin:.8em 0 .2em 0;
	padding:3px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #3366cc;
	text-align:center;
	}
	#contents a {
	color:dark blue;
	text-decoration: none ;
	}
	#contents a:hover {
	color:white;
	text-decoration:none;
	background-color: black;
	}
	#lcol {
	margin: 0 1em 0 0;
	padding: 6px;
	background:#e6f3ff;
	/*border:solid #e6f3ff 1em;*/
	font:small Verdana, Arial, Helvetica, sans-serif;
	color:black;
	float: left;
	width:226px;
	height:1000px;
	text-align:left;
	}
	#lcol a {
	color:dark blue;
	text-decoration: none ;
	}
	#lcol a:hover {
	color:black;
	text-decoration:none;
	background-color: white;
	}
	#lcol a:visited {
	color:dark blue;
	text-decoration: none ;
	}
	#lcolback {
	background:url(images/lcolbk.gif) no-repeat center;
	}
	.style3 {
	font-size: x-small;
	color: #FF0000;
}
.style4 {color: #FF0000}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
	#rcol {
	margin: 0;
	padding: 6px;
	background:#C0DFFD;
	/*border:dashed black thin;*/
	font:small Verdana, Arial, Helvetica, sans-serif;
	float: right;
	width:246px;
	height:1000px;
	text-align:center;
	}
	#footer {
	margin: 0;
	padding: 0;
	/*border-top: dashed black thin;
	border-bottom: dashed black thin;*/
	background: url(images/background4.jpg) repeat-x;
	clear:both;
	width:99%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:x-small;
	color: black ;
	text-align:center;
	height: auto;
    }
	#footer a {
	color:dark blue;
	text-decoration: none ;
	}
	#footer a:hover {
	color:yellow;
	text-decoration:none;
	background-color: black;
	}
	#footer a:visited {
	color:dark blue;
	text-decoration: none ;
	}
h1, h2, h3, h4 {
	margin:.8em 0 .2em 0;
	padding:0 6px 0 6px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #ccff99;
    }
img.left {
	margin: 0;
	padding: 0 1.3em 0 1.3em;
	float: left;
	}
img.center {
	margin: 0;
	padding: 0 1.3em 0 1.3em;
	align:center;
	}

Any and all assistance will be most appreciated, just as a sidenote the sliding menu is not working correctly in IE7 (and prob IE6 as well).

cybershot

I am not sure I understand what you are asking. Do you want your sidebar to touch the header and footer? What exactly do you need help with?

surelock

Yes exactly I want the columns to touch the header and footers.

Thanks much.

cybershot

I think it might have something to do with your menu. If you look at the site in I.E 7, the menu is messed up. There must be something pushing down on the sidebar. in I.E 7, the sidebar looks good and the menu is messed up and it's the opposite way on firefox and opera. I would get rid of the sliding menu and see if that fixes it.

surelock

Ok I double checked to make sure everything menu wise was working and everything seemed ok. I added a 1px border the color of my green slice to the top of my wrapper and it closed right up hmmm... oh well I just wanted to know if there was another way to do this.

treehouse : what would you like to learn today?

Forums

Columns not butting up to the headers and footers.