Dan_Sheen
07-11-2011, 05:44 AM
So I am finishing up a friends website for him but recently the footer went to the left hand side of the page and there is this big random gap between the navigation and the content. It is quite annoying and would like to get help to get it fixed.
Screenshots can be found attached.
Heres the source:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Catch the latest news on Fairs in Kent and London!" />
<meta name="keywords" content="fair, rides, kent, london" />
<title>Fair Rides Kent & London</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" alt="description" /></a></div>
</td>
<td>
<div id="flash"><img src="images/flash.png" alt="description" /></div>
<!--end header--></div>
</td>
</tr>
<tr>
<td>
<!--Start Navigation-->
<div id="navigation">
<img src="images/navigation.png" />
<a href="index.html"><img src="images/home-nav.png" border="0" /></a>
<a href="forums"><img src="images/forum-nav.png" border="0" /></a>
<a href="photos.html"><img src="images/photos-nav.png" border="0" /></a>
<a href="videos.html"><img src="images/videos-nav.png" border="0" /></a>
<a href="contact.html"><img src="images/contact-nav.png" border="0" /></a>
</div>
<!--End Navigation-->
</td>
<td>
<div id="content">
<!-- Add news content above this line here -->
<h2>10th July 2011</h2>
Today Fair Rides Kent & London's website has gone live. We have amazing collections of photos and the latest news reports
that we invite you to look at. Soon we are going to be creating a forum to form a community. So stay tuned for that!
Here you will find all the latest news of the website, what fair ride locations we visit and loads more.
</div>
</td>
</tr>
<tr>
<td>
<!--Start Footer-->
<div id="footer">
© Fair Rides Kent & London 2011. Website Created and Coded by <a href="http://cubehosts.eu">Cube Hosts</a>.
</div>
</td>
</tr>
</table>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
#header {
width: 100%;
height: 150px;
}
#logo {
width: 240px;
height: 150px;
float: left;
}
#flash {
width: 700px;
height: 150px;
padding-right: 100px;
}
#navigation {
width: 250px;
height: 500px;
}
#content {
width: 100%;
height: 500px;
font-family: ubuntu;
}
#footer {
width: 100%;
height: 74px;
clear: both;
font-family: ubuntu;
}
It is probably something completely obvious but I can't seem to find what.
Screenshots can be found attached.
Heres the source:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Catch the latest news on Fairs in Kent and London!" />
<meta name="keywords" content="fair, rides, kent, london" />
<title>Fair Rides Kent & London</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" alt="description" /></a></div>
</td>
<td>
<div id="flash"><img src="images/flash.png" alt="description" /></div>
<!--end header--></div>
</td>
</tr>
<tr>
<td>
<!--Start Navigation-->
<div id="navigation">
<img src="images/navigation.png" />
<a href="index.html"><img src="images/home-nav.png" border="0" /></a>
<a href="forums"><img src="images/forum-nav.png" border="0" /></a>
<a href="photos.html"><img src="images/photos-nav.png" border="0" /></a>
<a href="videos.html"><img src="images/videos-nav.png" border="0" /></a>
<a href="contact.html"><img src="images/contact-nav.png" border="0" /></a>
</div>
<!--End Navigation-->
</td>
<td>
<div id="content">
<!-- Add news content above this line here -->
<h2>10th July 2011</h2>
Today Fair Rides Kent & London's website has gone live. We have amazing collections of photos and the latest news reports
that we invite you to look at. Soon we are going to be creating a forum to form a community. So stay tuned for that!
Here you will find all the latest news of the website, what fair ride locations we visit and loads more.
</div>
</td>
</tr>
<tr>
<td>
<!--Start Footer-->
<div id="footer">
© Fair Rides Kent & London 2011. Website Created and Coded by <a href="http://cubehosts.eu">Cube Hosts</a>.
</div>
</td>
</tr>
</table>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
#header {
width: 100%;
height: 150px;
}
#logo {
width: 240px;
height: 150px;
float: left;
}
#flash {
width: 700px;
height: 150px;
padding-right: 100px;
}
#navigation {
width: 250px;
height: 500px;
}
#content {
width: 100%;
height: 500px;
font-family: ubuntu;
}
#footer {
width: 100%;
height: 74px;
clear: both;
font-family: ubuntu;
}
It is probably something completely obvious but I can't seem to find what.