I am having trouble getting my content to go inside of my container <DIV>. It all ends up below the bottom of my background. I’ve been stuck on this for three days. Please help!
Also, any idea why I am getting so much empty space at the bottom of the page? And in Mozilla to the right is much empty space as well. The more content I add the more it grows. Shouldn’t my body only stay wide and high enough to contain actual content?
Thanks.
html, body {
margin: 0;
color: black;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
/* background-image: url("images/dk-green-rect.jpg"); */
/* background-attachment: fixed; */
}
div#frameBG {
top:0;
left:0;
width:100%;
height:100%;
z-index: 1;
}
div#container {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
/* Styling for masthead */
div#logo {
position: relative;
top: 50px;
border: 0;
padding: 0;
}
div#headPic1 {
position: relative;
top: 50px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
}
div#headPic2 {
position: relative;
left: 223px;
top: -69px;
border: 0;
padding: 0;
margin: 0;
}
div#headPic3 {
position: relative;
left: 447px;
top: -188px;
border: 0;
padding: 0;
margin: 0;
}
div#headFooter {
position: relative;
top: -188px;
border: 0;
padding: 0;
margin: 0;
}
div#leftCol {
width: 150px;
position: relative;
top: -918px;
left: 0px;
border: 2px;
padding: 10px;
background-color: #CCCC00;
text-align: center;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
<DIV id="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV>
<DIV id="container">
<!-- Setup the header area -->
<DIV id="logo"><img src="images/header_01.jpg"></DIV><DIV id="headPic1"><A HREF="images/pic1.jpg" TARGET="new"><IMG SRC="images/header_02.jpg" WIDTH=223 HEIGHT=119 BORDER=0 ALT=""></A></DIV><DIV id="headPic2"><A HREF="images/pic3.jpg" TARGET="new"><IMG SRC="images/header_03.jpg" WIDTH=224 HEIGHT=119 BORDER=0 ALT=""></A></DIV><DIV id="headPic3"><A HREF="images/pic2.jpg" TARGET="new"><IMG SRC="images/header_04.jpg" WIDTH=222 HEIGHT=119 BORDER=0 ALT=""></A></DIV><DIV id="headFooter"><IMG SRC="images/header_05.jpg" WIDTH=669 HEIGHT=55 ALT=""></DIV>
<DIV id="leftCol">
<DIV ...bunch of stuff here </DIV>
<DIV ...bunch of stuff here </DIV>
<DIV ...bunch of stuff here </DIV>
</DIV>
</DIV>
</BODY>
<HTML>