Hi thanks for your response. Note because the footer goes right to the top below the masterheader I used another class called absfooter which uses absolute position. But this is not ideal as my content size will vary from time to time,s o I will need to adjust the position of the footer.
Here is the CSS code:
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.625em; /* This gives a value of 10px */
/* background-color: #E1E1E1; */
background-color: #FFFFFF;
margin: 0;
padding: 0;
margin: 0 auto;
font: #000000;
height: 100%;
width: 900px;
}
#outer{
flow:left;
min-height:100%;
height:auto;
width:900px;
margin-left:auto;/* center it*/
margin-right:auto;/* center it*/
position:relative;
text-align:left;
}
#container1 {
position:absolute;
float: left;
width: 420px;
}
#container2 {
left:420px;
position:absolute;
float: left;
width: 300px;
}
#container3 {
left:720px;
position:absolute;
float: left;
width: 180px;
}
.boxarticle {
width: 70%;
top: 144px;
font-size: 1.4em;
text-align: left;
line-height:150%;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
height: 500px;
float: left;
margin-left: 10px;
}
.boxpoem {
width: 100%;
top: 144px;
font-size: 1.4em;
text-align: left;
line-height:150%;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
height: 500px;
float: left;
margin-left: 10px;
}
.boxanalysis {
font-family: Georgia, "Times New Roman", Times, serif;
border-width:thin;
padding:0.5em 1em 1em 1em;
border-style: solid;
border-color: #000000;
font-size: 1.2em;
text-align: justify;
font-stretch:expanded;
background-color: #CAFBD2;
visibility: visible;
margin-top: 5px;
}
.boxmiddle {
font-family:inherit;
text-align: justify;
line-height:125%;
padding:0.5em 1em 1em 1em;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
font-size: 1.2em;
background-color: #CDFCFC;
visibility: visible;
margin: 5px 0px 0px 5px;
}
.boxright {
font-family:inherit;
text-align: justify;
line-height:125%;
padding:0.5em 1em 1em 1em;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
height: 100px;
font-size: 1.2em;
background-color: #CAFBD2;
visibility: visible;
margin: 5px 0px 0px 5px;
}
#footer {
font-family:inherit;
font-size: 1em;
color: #000000;
height:15px;
background-color:#8FDCA8;
font-weight: bolder;
left: 0px;
width:900px;
position:absolute;
}
#absfooter {
font-family:inherit;
font-size: 1em;
color: #000000;
height:15px;
background-color:#8FDCA8;
font-weight: bolder;
left: 0px;
top:1000px;
width:900px;
position:absolute;
}
#clearfooter{clear:both;height:15px;width:100;}
Here is the HTML code :
<div id="outer"> <!-- this is wrapper that takes up 90% of the height and leaves 10% for the footer -->
<div id="container1">
<div class="boxanalysis">
<div align="center" class="big">Latest Analysis
</div>
<hr><br>
<?php do { ?>
<div class="image_float">
<img src="<?php echo $row_RsHeadlines['picture']; ?>"
height="120" width="120"/>
</div>
<div class="title">
<a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>">
<?php echo $row_RsHeadlines['title']; ?> </a>
</div>
<br>
<div>
<?php echo $row_RsHeadlines['description']; ?>
<a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>">
More... </a>
</div>
<br>
<?php $maxRows_RSHeadlines=$maxRows_RSHeadlines-1;
$row_RsHeadlines = mysql_fetch_assoc($RsHeadlines); ?>
<?php } while ($maxRows_RSHeadlines>0); ?>
<p align="center"> <a href="analysis.php" class="archive"> Archive >> </a> </p>
</div> <!--end of boxanalysis -->
</div> <!-- end of first container -->
<div id="container2">
<div class="boxmiddle">
<div align="center" class="big">21st Century Myths </div>
<hr>
<div class="fiction"> <?php echo $row_RsMyth['fiction']; ?></div>
<br>
<div class="bigcolor"> But the truth is:</div>
<br>
<div> </font> <?php echo $row_RsMyth['fact']; ?></div>
</div>
<div class="boxmiddle">
<div align="center" class="big">Groups </div>
<hr>
</div>
<div class="boxmiddle">
<div align="center" class="big"> In Quotes </div>
<hr>
<div align="center" class="boldtext"> "<?php echo $row_RsQuote['content']; ?>" </div>
<br>
<div align="left" class="medium"><?php echo $row_RsQuote['source']; ?></div>
</div>
</div>
<!-- end of second container -->
<div id="container3">
<div class="boxright">
<div class="big" align="center"> Forthcomming Book </div>
<hr>
<div class="big" align="center" > Title </div>
<br>
<div align="center"> By Explorer </div>
</div>
<div class="boxright">
<div align="center" class="big"> Poetry Corner </div>
<hr>
<div class="bigcolor" align="center"> <a href="poems.php?recordID=<?php echo $row_RsPoems['poemid']; ?>"> <?php echo $row_RsPoems['title']; ?> </a> </div><br>
<div align="center"> By <?php echo $row_RsPoems['fullname']; ?> <br> </div>
</div>
<div class="boxright">
<div align="center" class="big"> Letters </div>
<hr>
<!-- <div class="bigcolor" align="center"> <a href="poems.php?recordID=<?php echo $row_RsPoems['poemid']; ?>"> <?php echo $row_RsPoems['title']; ?> </a> </div><br>
<div align="center"> By <?php echo $row_RsPoems['fullname']; ?> <br> </div> -->
</div>
</div>
<!-- end of third container -->
<div id="clearfooter"> </div>
<div id="absfooter">
<p align="center"><a href="contactus.html"> Contact Us |</a><a href="aboutus.html">
About Us | </a><a href="site.html">Site Map</a></p>
</div>
</div> <!-- end of the outershell -->
