PDA

View Full Version : Footer not clearing main content



tomsk82
Feb 26th, 2012, 05:50 PM
Hi everyone. I've been on the forums before to have a look for answers to questions but have been scratching my head over this one for a while now! I'm pretty new to all of this so my code probably isn't brilliant but any help with this matter would be very much appreciated! I've pretty much put this together from what I've learned on the web so far. The footer ends up at the top of the 'content' rather than sitting below it. I know it'll be something obvious! Code as follows:




body, html
{
margin:0;
padding:0;
font-family:verdana;
font-size:16px;
background-image:url('images/birdsberries.png');
background-size:100%
}
a:link
{
color:#000000;
text-decoration:none;
}
a:visited
{
color:#000000;
}
a:hover
{
color:#818181;
}
a:active
}
color:#000000;
}
h1
{
color:black;
text-align:center;
font-family:Helvetica;
}
#wrap
{
margin: 0 auto;
position:relative;
width:70%;
}
#menu
{
border-style:solid;
border-color:transparent;
font-family:calibri;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-align:center;
width:100%;
border-radius:15px;
float:left;
background-color:#EEEEEE;
box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
margin-top:2em;
margin-bottom:2em;
}
#content
{
border-style:solid;
border-color:transparent;
border-radius:15px;
background-color:#EEEEEE;
width:100%;
float:left;
overflow: auto;
box-shadow:5px 5px 10px #000;
-webkit-box-shadow:5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
margin-bottom:2em;
}
#footer
{
background-image:url('images/birdsberries.png');
background-repeat;no repeat;
height:50px;
clear:both;
padding:5em;
margin:0;
}
IMG.displayed
{
display: block;
margin-left: auto;
margin-right: auto;
border-style:solid;
border-color:transparent;
border-width:20px;
height:45px;width:400px;
}

----------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Bank Holidays for the UK and Ireland</title>
<link rel="stylesheet" href="mystyle.css" />
</style>
</head>
<html>
<body>

<div id="wrap">

<div id="menu">

<h1>UK & Ireland Bank Holidays</h1>
<a href="home.html"> 2012</a> &#160 &#160
<a href="2013.html"> 2013 </a> &#160 &#160 </br>

</div>

</br>

<div id="content">
<table border="0">
<tr>
<td>Good Friday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp April 6</td>
</tr>
<tr>
<td>Easter Monday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp April 9</td>
</tr>
<tr>
<td>Early May Bank Holiday </td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp May 7</td>
</tr>
<tr>
<td> Spring Bank Holiday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp June 4</td>
</tr>
<tr>
<td>Diamond Jubilee Holiday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp June 5</td>
</tr>
<tr>
<td>Summer Bank Holiday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp August 27</td>
</tr>
<tr>
<td>Christmas Day</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp December 25</td>
</tr>
<tr>
<td>Boxing Day </td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp December 26 </td>
</tr>
</div>
</div>

<div id="footer">
</div>
</body>

</html>


Thank you!

trav5567
Feb 26th, 2012, 08:16 PM
You forgot to end the table tag at the end.


HTML

<div id="content">
<table border="0">
<tr>
<td>Good Friday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp April 6</td>
</tr>
<tr>
<td>Easter Monday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp April 9</td>
</tr>
<tr>
<td>Early May Bank Holiday </td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp May 7</td>
</tr>
<tr>
<td> Spring Bank Holiday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp June 4</td>
</tr>
<tr>
<td>Diamond Jubilee Holiday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp June 5</td>
</tr>
<tr>
<td>Summer Bank Holiday</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp August 27</td>
</tr>
<tr>
<td>Christmas Day</td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp December 25</td>
</tr>
<tr>
<td>Boxing Day </td>
<td>&nbsp &nbsp &nbsp &nbsp &nbsp December 26 </td>
</tr>
</table>
</div>

trav5567
Feb 26th, 2012, 08:17 PM
Hope that helped you out

tomsk82
Feb 26th, 2012, 08:30 PM
Trav - you're a star! I've been staring at this for ages! Was convinced it was something I'd done in the 'content' field. Cheers :thumbsup: