I'm struggling to position my footer directly after the last div on my page, as it's appearing lower than I'd like. Can anyone assist with this issue? Here is the code snippet:
<div id="container">
<div id="header">
<h1>
<a href="#"><img src="tracylogo6header.jpg" alt="Millington and Hope" /></a>
</h1>
<h2>
</h2>
</div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="stock.html">Stock</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="box">
<a href="#"><img src="home4.jpg" alt="Slideshow Image 1" /></a>
<a href="#"><img src="home6.jpg" alt="Slideshow Image 2" /></a>
<a href="#"><img src="home4.jpg" alt="Slideshow Image 3" /></a>
</div>
<div id="box2">
<a href="#"><img src="tracylogosmall.jpg" alt="Logo" /></a>
</div>
<div id="footer">
<p class="client">Tel: 0785740 E-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17637d73727b766772577f78637a767e7b39747839627c">[email protected]</a></p>
</div>
</div>
html,body
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body
{
background:rgb(171,163,144);
text-align: center;
min-width: 600px;
}
#container
{
margin:0 auto;
background:rgb(171, 163, 144);
width:80%;
}
#nav
{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
background: -webkit-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144));
background: -moz-radial-gradient(circle, rgb(151,143,124),rgb(171, 163, 144));
}
#nav li
{
display:inline;
}
#nav a
{
display:inline-block;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding:10px 20px 10px 20px;
text-decoration:none;
color:white;
}
...
...
h3
{
color:white;
text-decoration:underline;
}
#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:rgb(171,163,144); /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:rgb(171,163,144); /* column 1 background colour */
}
#left {
float:left;
width:46%;
position:relative;
left:52%;
text-align:left;
overflow:hidden;
}
#right{
float:left;
text-align:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
p
{
color:white;
}
The footer has a large margin after the last div but doesn't seem to be accurately positioned according to what was declared in the code.