Help with footer

Tried the clearfix but with no joy.

Tidied up my code (ignore messy table just a temp thing!) and still nothing.

Code: 
<body>
<div id="pagewidth">
<div id="topbar"></div>
<img src="images/topimage1.jpg" alt="#" />

<table>
<tr>
<td>
<div id="box">
<h2>.LISTEN</h2>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
</div>
</div>
</td>
<td>
<div id="box2">
<h2>.WATCH</h2>
<div class="boxcontent2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
</div>
</div>
</td>
<td>
<div id="box3">
<h2>.READ</h2>
<div class="boxcontent3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vehicula consequat arcu. Vestibulum gravida erat ut felis. Mauris nec leo in tortor sagittis cursus. Aliquam erat volutpat.</p>
</div>
</div>
</td></tr></table>

<div id="footer">
<ul>
	<li><a href="index.php">home</a></li>//
	<li><a href="#">about</a></li>//
	<li><a href="#">listen</a></li>//
	<li><a href="#">watch</a></li>//
	<li><a href="#">read</a></li>//
	<li><a href="#">contact</a></li>//
	<li><a href="#">links</a></li>//
	<li><a href="#">forum</a></li>	//	
</ul>
</div><!-- // end footer -->
</div><!--end pagewidth-->
</body>
</html>


Code: 
*{
   border:0;
   margin: 0;
   padding: 0;
}
p {padding-top: 4px; padding-bottom: 8px;}

body { 	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 0.7em; 
	background-image: url(images/bg.gif);
	background-repeat:repeat;
	color:#FFF;
}
#pagewidth {
	width: 758px;
	height: 100%;
	text-align: left;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	border: solid 2px #FFF;
	background-color: #FFF;
}
#topbar {width:758px;
         height:80px;}
		 
#image {width:758px;
        height:400px;
}		 
#box {
    width: 250px;
	height: 200px;
}
#box h2 {
	width: 235px; 
	height:25px; 
	padding-top:8px;
	padding-bottom:2px;
	padding-left:15px; 
	background-color: #ff9900;
}
.boxcontent {
    width: 240px;
	height: 200px;
	padding-left:5px; 
	padding-right:5px;
	background-color: #ffcb6f;
}
#box2 {
    width: 250px;
	height: 200px;
}
#box2 h2 {
	width: 235px; 
	height:25px; 
	padding-top:8px;
	padding-bottom:2px;
	padding-left:15px;
	background-color: #00b42a;
}
.boxcontent2 {
    width: 240px;
	height: 200px;
	padding-left:5px; 
	padding-right:5px;
	background-color: #3cd758;
}
#box3 {
    width: 250px;
	height: 200px;
}
#box3 h2 {
	width: 235px; 
	height:25px; 
	padding-top:8px;
	padding-bottom:2px;
	padding-left:15px; 
	background-color: #00baff;
}
.boxcontent3 {
    width: 240px;
	height: 200px;
	padding-left:5px; 
	padding-right:5px;
	background-color: #83d2f1;
}
#footer{
	clear:both;
	width: 750px;
	padding-left:5px;
	padding-right:5px;
	color:#000;
	height: 25px;
	font-size: 10px;
	margin-top: 5px;
}
#footer a {
	color:#000;
	text-decoration: none;
	border: none;
}
#footer a:hover {
	color:#000;
	text-decoration: underline;
	border: none;
}
#footer ul {
	color: #000;
	display: inline;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#footer ul li {
	display: inline;
	padding: 0;
	margin: 0;
}
#footer ul li a {
	color: #000;
	display: inline;
	padding: 0;
	margin: 0 5px 0 0;
}


http://dzireonline.co.uk/new/
http://dzireonline.co.uk/new/screen.css
 
If you look now you can see on FF that the footer strip cuts across the 3 boxes at the bottom, it dosen't "push down" underneath them. :confused:
 
Would really appreciate it if someone could give me a hand with this. Can't move on until i've got this sorted.

I've noticed that even with the footer removed the whole container div dosen't extend to the bottom of the page on FF. Fine on IE though.

Any help would be really appreciated.

Cheers.
 
You must log in or register to reply here.
Back
Top Bottom