...

View Full Version : Send footer to bottom



bradz1993
10-28-2011, 04:43 PM
The footer keeps overlapping the gallery.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Capability Berwick</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"/>


<!-- The external style sheets -->
<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}





</style>

<meta name="keywords" content="landscape maintenance, gardening, kent, capability berwick">
<meta name="description" content="Capability Berwick - Landscape Maintenance">
<meta name="author" content="Bradley Berwick">
</head>


<body>

<div id="container">
<div id="header">
<h1>
Capability Berwick
</h1>
</div>
<div id="topnav">
<ul>
<li><a href="index.html" > Home </a>
<li><a href="services.html" >Services</a>
<li><a href="gallery.html" ><span class="currentpage">Gallery</span></a>
<li><a href="contact.html" >Contact Us</a>

</ul>
</div>
<div id="content">
<h2>
Gallery
</h2>
<p>
Gallery of photos
</p>

</div>

<div id="photos">
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>

<div id="footer">
<p>Last updated on 28th Oct 2011<br>
Maintained by <a href="mailto:berwick_bradley@mail.com">
Bradley Berwick</a>
</p>
</div>


</body>
</html>





#top
{
margin: 0;
background: #fff;
}

#header
{
background: #7A991A;
padding: 20px;
}

#header h1
{
margin: 0; color: #FFFFFF; font-family:"Broadway"; font-size:40px;
}


#topnav ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#topnav li
{
float:left;
width: 25%;
}

#topnav a {
background-color: #98BF21;
color: #FFFFFF;
display: block;
font-weight: bold;
padding: 5px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
}

#topnav a:hover
{
background-color:#7A991A;
}



.currentpage
{
font-style:italic;
}



#content
{
clear: left;
padding: 20px;
}

#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}



#footer
{
background: #98bf21;
text-align: right ;
padding: 0;
height: 70px;
float: bottom;
}

#footer p
{
font-style: italic;
padding: 15px 5px 0px 5px;
}

SB65
10-28-2011, 04:52 PM
It's because your images within #photos are floated - so #photos doesn't extend to include them. Try adding clear:both to your css for #footer.

It looks like you're missing a closing tag for #container as well.

teedoff
10-28-2011, 04:53 PM
You have a div called photos in which you have several floated images. You dont clear those floats, so thats why your footer is not behaving.

Add overflow: auto to your photo div.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum