Bottom footer div not sitting after content div

Sherri

New to the CF scene

Join Date: Aug 2011
Posts: 8

Bottom footer div not sitting after content div

Aug 24, 2011, 12:28 PM

Hello. I would like my footer to sit under my container div. I don't want to use fixed or absolutle positioning because I want the user to see it after they get to the bottom of the page. For some reason, it's sitting up higher on the page over the content. Please advise.

404 Not Found

https://www.tbvet.com/dev/template.html

Code:

<!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=windows-1250">
<title>Thunder Bay Veterinary Hospital</title>
<script src="jquery=1.4.3.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="stuHover.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="templatestyles.css" />
<link rel="stylesheet" type="text/css" href="pro_dropdown_2.css" />
</head>

<body>
<div id="corner_graphic"><img src="images/top-border-cornergraphic.png" /></div>
<div id="container">
	<div id="telephone">807.623.3531</div>
	<div id="searchbox">
    	<form>
        	<input type="text" id="search" name="search" />
            <input id="searchbtn" type="image" src="images/search-icon.png" alt="Search Site" />
        </form>
    </div>
	<div id="logo"><img src="images/logo2.png" /></div>
	<div id="topnav">
       	<ul class="topnav">
        <li><a href="location.php" title="Location"><span>Location</span></a></li>
        <li><a href="contact.php" title="Contact"><span>Contact Us</span></a></li>
        <li><a href="#" title="Webstore"><span>Web Store</span></a></li>
    	</ul>     
    </div>
    <div id="hours-container"></div>
	<div id="centernav">
        <ul id="nav" class="centernav">
    		<li class="top"><a href="index.htm" title="Home" class="top_link"><span>Home</span></a></li>
        	<li class="top"><a href="#" title="About" class="top_link"><span class="down">About Us</span></a>
        		<ul class="sub">
            		<li><a href="about.php">Our Practice</a></li>
            		<li><a href="location.php">Location</a></li>
                	<li><a href="#">Hospital Tour</a></li>
              	  	<li><a href="#" class="fly">Community Involvement</a>
                    	<ul>
							<li><a href="community_programs.php">Community Programs</a></li>
							<li><a href="#">Fundraising</a></li>
						</ul>
                    </li>
        		</ul>
        	</li>
       		<li class="top"><a href="#" title="Team" class="top_link"><span class="down">Our Team</span></a>
        		<ul class="sub">
            		<li><a href="#">Veterinarians</a></li>
            		<li><a href="#">Support Staff</a></li>
            	</ul>
        	</li>
        	<li class="top"><a href="#" title="Services" class="top_link"><span class="down" >Services</span></a>
        		<ul class="sub">
            		<li><a href="#">Pet Wellness</a></li>
            		<li><a href="diagnostic_services.php">Diagnostic Services</a></li>
                    <li><a href="surgery.php">Surgery</a></li>
                    <li><a href="dental_care.php">Dental Care</a></li>
                    <li><a href="#">Euthanasia and Cremation</a></li>
                    <li><a href="#" class="fly">Canine Training</a>
                    	<ul>
							<li><a href="#">About</a></li>
							<li><a href="#">Classes and Workshops</a></li>
                            <li><a href="#">Behavioural Consultation</a></li>
                            <li><a href="#">Newsletters</a></li>
                            <li><a href="#">Links</a></li>
						</ul>
                    </li>
                    <li><a href="#">After-hours Emergencies</a></li>
            	</ul>
        	</li>
        	<li class="top"><a href="#" title="Resources" class="top_link"><span class="down">Resources</span></a>
        		<ul class="sub">  
                	<li><a href="#">Health Topics</a></li>      		       		
                    <li><a href="#">Client Forms</a></li>
                    <li><a href="#">Just For Kids!</a></li>
                    <li><a href="#">Links</a></li>
            	</ul>
        	</li>
        </ul> 
    </div>
    <img id="cat" src="images/cat.png" />
    <img id="dog" src="images/dog.png" />
    <div id="information-container">
    	<div id="inner-container">
        	<div id="content">
            	<p>Lorem ipsum dolor sit amet, potenti vitae pellentesque gravida. Arcu ultrices wisi morbi sed eu rutrum, curabitur nibh erat arcu dictumst. Neque nulla elit felis, wisi cum ac, dignissim in nulla blandit magna mi. Ac tincidunt nascetur, sagittis enim nunc velit, et at eu nec, convallis senectus aptent elit, lorem wisi adipiscing cursus nunc a. Quisque interdum eros, porta nonummy pulvinar enim quis ut. Morbi in lectus, tincidunt hymenaeos proin ac pulvinar magna dapibus, in vel fames mi vehicula sapien, a dui sed hendrerit massa, dolor quisque praesent eu turpis eget felis. Magna metus nec ac curabitur, felis varius quam dolor senectus, nunc sapien sem eros pede nunc tincidunt. Ut ac tincidunt, lectus ipsum morbi convallis risus, vitae nam turpis diam tristique lacus, magnis massa, id libero suspendisse nonummy. Etiam ipsum mi ipsum mauris faucibus vestibulum.</p>
            	<p>Lorem ipsum dolor sit amet, potenti vitae pellentesque gravida. Arcu ultrices wisi morbi sed eu rutrum, curabitur nibh erat arcu dictumst. Neque nulla elit felis, wisi cum ac, dignissim in nulla blandit magna mi. Ac tincidunt nascetur, sagittis enim nunc velit, et at eu nec, convallis senectus aptent elit, lorem wisi adipiscing cursus nunc a. Quisque interdum eros, porta nonummy pulvinar enim quis ut. Morbi in lectus, tincidunt hymenaeos proin ac pulvinar magna dapibus, in vel fames mi vehicula sapien, a dui sed hendrerit massa, dolor quisque praesent eu turpis eget felis. Magna metus nec ac curabitur, felis varius quam dolor senectus, nunc sapien sem eros pede nunc tincidunt. Ut ac tincidunt, lectus ipsum morbi convallis risus, vitae nam turpis diam tristique lacus, magnis massa, id libero suspendisse nonummy. Etiam ipsum mi ipsum mauris faucibus vestibulum.</p>
                <p>Lorem ipsum dolor sit amet, potenti vitae pellentesque gravida. Arcu ultrices wisi morbi sed eu rutrum, curabitur nibh erat arcu dictumst. Neque nulla elit felis, wisi cum ac, dignissim in nulla blandit magna mi. Ac tincidunt nascetur, sagittis enim nunc velit, et at eu nec, convallis senectus aptent elit, lorem wisi adipiscing cursus nunc a. Quisque interdum eros, porta nonummy pulvinar enim quis ut. Morbi in lectus, tincidunt hymenaeos proin ac pulvinar magna dapibus, in vel fames mi vehicula sapien, a dui sed hendrerit massa, dolor quisque praesent eu turpis eget felis. Magna metus nec ac curabitur, felis varius quam dolor senectus, nunc sapien sem eros pede nunc tincidunt. Ut ac tincidunt, lectus ipsum morbi convallis risus, vitae nam turpis diam tristique lacus, magnis massa, id libero suspendisse nonummy. Etiam ipsum mi ipsum mauris faucibus vestibulum.</p>                   
			</div>
		</div>
	</div>    
</div>
<div id="footer-border">
	<div id="footer-container">
      		<span class="copyright">Copyright &copy; 2011-<script type="text/javascript">document.write((new Date()).getFullYear());</script> Thunder Bay Veterinary Hospital. All Rights Reserved. </span>
	</div>
</div>
</body>
</html>

Code:

/* CSS Document */



html, body{
	margin:0;
	padding:0;
	height:100%;
	font-family:Georgia, serif;
	font-size:1.1em;
	font-color:296a10;	
	background-color:#f8f4b7;
	background-image:url('images/background-top.jpg');
	background-repeat:repeat-x;
}

h1 {
	margin:0;
	padding-top:16px;
	padding-bottom:18px;
	font-size:2em;
	font-weight:600;
	color:#ac4210;
}

h2 {
	margin:0;
	padding-top:6px;
	padding-bottom:6px;
	font-size:1.5em;
	font-weight:600;
	color:#296a10;
}

h3 {
	margin:0;
	padding-top:4px;
	padding-bottom:4px;
	font-size:1.3em;
	font-weight:600;
	color:#ac4210;
}

p {
	color:#296a10;
	line-height:140%;
}

#corner_graphic {
	position:absolute;
	width:399px;
	height:131px;
}

#container {
	width:1050px;
	height: 100%;
	margin:0 auto;
}

#telephone{	
	float:left;	
	margin-left:625px;
	margin-top:5px;
	font-size:1.6em; 
	font-family:Times, serif;
	color:#f8f4b7;
	text-shadow:2px 2px 2px #000;
}
#searchbox{
	margin-left:20px;
	margin-top:7px;
	float:left;
	width:200px;
	height:31px;
	padding:auto 0;
	background-color:#8aaf7c;
	border-right:1px solid #0b3726;
	border-bottom:1px solid #0b3726;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-top-left-radius:5px;
	-moz-border-top-right-radius:5px;
	-moz-border-bottom-left-radius:5px;
	-moz-border-bottom-right-radius:5px;
}
#searchbtn {
		float:right;
		width:25px;
		height:30px;
		border:0;
		curser:pointer;
		margin-right:6px;
}

#search {
	margin-top:5px;
	margin-left:6px;
	padding-left:3px;
	width:150px;
	height:14px;
	background-color:#f8f4b7;
	border-top-left-radius:5px;
	-moz-border-top-left-radius:5px;
}



#logo {
	float:clear;
	position:relative;
	margin-left:60px;
	top:24px;
	left:0;
	width:600px;
	height:128px;
}
#topnav {
	float:right;
    width:320px;
	font-size:70%;
	margin-right:25px;
	margin-top:-53px;
}

#topnav ul{
	list-style-type:none;
	margin:0;
	margin-left:10px;
	padding:0;
}

#topnav li{
	display:inline;
	margin:0;
	padding:0;
}

#topnav a {
	float:left;
	background:url('images/tab-left.png') no-repeat left bottom;
	margin:0;
	padding:0 0 0 9px;
	text-decoration:none;
}

#topnav a span {
	float:left;
	display:block;
	background:url('images/tab-right.png') no-repeat right bottom;
	padding:5px 14px 9px 6px;
	color:#f8f4b7;
	font-weight:600;
}

#topnav a span {
	float:none;
}

#topnav a:hover span {
	color:#0b3726;
}

#topnav #current a {
	background-position:0 -125px;
}

#topnav #current a span {
	background-position:100% -125px;
	color: black;
}

#topnav a:hover {
	background-position:0% -93px;
}

#topnav a:hover span {
	background-position:100% -93px;
}

#hours-container {
	position:relative;
	left:69%;
	top:25px;
	width:293px;
	height:149px;
	padding:0;
	background-image: url('images/hours.png');
	z-index:5000;
}
#centernav {
	margin:0 auto;
	margin-top:-40px;
    width:727px;
	font-size:70%;
}


#information-container{
	margin-top: 0;
	margin-bottom: 52px;
	margin-left: auto;
	margin-right: auto;
	width:716px;
	padding:6px;
	padding-bottom:8px;
	background-color:#8aaf7c;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-bottom-left-radius:5px;
	-moz-border-bottom-right-radius:5px;
	-moz-box-shadow: 1px 1px 1px #296a10; 
	-webkit-box-shadow: 1px 1px 1px #296a10; 
	box-shadow: 1px 1px 1px #296a10;
}

#inner-container{
	width:704px;
	margin:0 auto;
	padding:6px;
	text-align:left;
	background-color:#709164;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-top-left-radius:5px;
	-moz-border-top-right-radius:5px;
	-moz-border-bottom-left-radius:5px;
	-moz-border-bottom-right-radius:5px;
	-moz-box-shadow: 1px 1px 1px #296a10; 
	-webkit-box-shadow: 1px 1px 1px #296a10; 
	box-shadow: 1px 1px 1px #296a10;
	
}

#content{
	width:684px;
	margin:0 auto;
	padding:2px 10px;
	padding-bottom:15px;
	text-align:left;
	font-family:Georgia, serif;
	font-size:14px;
	line-height:16px;
	text-decoration:none;
	color:#296a10;
	background-color:#fff;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-top-left-radius:5px;
	-moz-border-top-right-radius:5px;
	-moz-border-bottom-left-radius:5px;
	-moz-border-bottom-right-radius:5px;
	-moz-box-shadow: 1px 1px 1px #296a10; 
	-webkit-box-shadow: 1px 1px 1px #296a10; 
	box-shadow: 1px 1px 1px #296a10;
	}

#cat {
	position:fixed;
	top:310px;
	height:270px;
	width:130px;
	padding:0;
	margin-left:40px;
	z-index:2000;
}


#dog {
	position:fixed;
	top:300px;
	height:300px;
	width:184px;
	padding:0;
	margin-left:855px;
	z-index:500;
}

#footer-border {
	width:100%;
	height:40px;
	background-color:#296a10;
}

#footer-container{
	width:470px;
	height:20px;
	margin:0 auto;
	padding-top:7px;
}

.copyright {
	font-size:0.6em;
    color:#f8f4b7;
}
/* form styles */

.form_padding {
	padding-left: 10px;
	
}

.numerical {
	font-family: "Times New Roman", Times, serif;	
}

Tags: None

resdog

New to the CF scene

Join Date: Aug 2011

Posts: 233
- Share
- Tweet
#2

Aug 24, 2011, 12:37 PM

In your #container, remove the "height: 100%"

WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.
Comment
Sherri

New to the CF scene

Join Date: Aug 2011

Posts: 8
- Share
- Tweet
#3

Aug 24, 2011, 12:58 PM

Originally posted by resdog View Post

In your #container, remove the "height: 100%"

It worked. Thank you so much. I stared at this for over an hour and couldn't figure out what was causing it. I appreciate it. Thanks again.
Comment

Previous template Next

Announcement

Bottom footer div not sitting after content div

Bottom footer div not sitting after content div

Comment

Comment