PDA

View Full Version : cant place my footer correctly on 2 pages


silverglade
05-29-2009, 01:26 PM
hi, i have two pages that the footer either goes way down, or appears in pieces if my text div above it goes too far down. i am not sure how to get differing heights of pages with no problems. any help greatly appreciated. i took out the footer on these problem pages.

http://derekvanderven.com/liberty_co/about.html

and there is no padding at the bottom of the text like i want.

and here http://derekvanderven.com/liberty_co/links.html

i took out the footer because when the text would go down further, it would
get truncated.

here is the css to the site

@charset "utf-8";
/* CSS Document */


body {
margin: 0 ;
padding: 0;
}
#wrapper {
overflow: auto;
width: 900px;
height: 629px;
margin: 0 auto 0 auto;
background-image: url(images_raw/more_images/final_liberty_background.jpg );
background-repeat:no-repeat;
border: solid black 2px;
}

#nav_links {
width: 448px;
float: right;
margin-top: 125px;
margin-right: 10px;
margin-bottom: 0;
margin-left: auto;
}
#nav_links img {
float: left;
}
/****************************about code************************/

#about_header {
margin: 0 auto 0 auto;
width: 900px;
height: 160px;
background-image: url(images_raw/about_slices/about_header.jpg);
background-repeat:no-repeat;
}

#about_background {
margin: 0 auto 0 auto;
width: 900px;
height: 469px;
background-image: url(images_raw/about_slices/about_background.jpg);
background-repeat:no-repeat;
}

#about_wrapper {
width: 900px;
border: solid black 2px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: white;

}

#all_page_nav_links {
float: right;
width: 435px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 0;
margin-left: auto;
}

#all_page_nav_links img {
float: left;
}
/*************************************links code*******************************/

#links_background {
width: 900px;
height: 700px;
background-image: url(images_raw/links_slices/links_background.jpg);
background-repeat:no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

/***********************************contact code*********************************/

#contact_background {
margin: 0 auto 0 auto;
width: 900px;
height: 469px;
background-image: url(images_raw/contact_slices/contact_background.jpg);
background-repeat:no-repeat;
}

#generic_top_text {
float: left;
width: 400px;
border: solid #5E594D 2px;
margin-top: 75px;
margin-right: auto;
margin-bottom: 25px;
margin-left: 50px;
color: #463E0B;
font-style: italic;
}
#generic_top_text p {
padding: 10px ;
text-indent: 10px ;
}

#footer {
width: 200px;
text-align: center;
color: black;
margin-top: 600px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#about_footer {
width: 200px;
text-align: center;
color: black;
margin-top: 400px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#contact_wrapper {
overflow: auto;
width: 900px;
border: solid black 2px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: white;

}

#contact_footer {
margin: 200px auto 0 auto;
width: 200px;
text-align: center;
color: black;
}

#about_down_footer {
width: 220px;
text-align: center;
color: black;
margin-top: 100px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}


and here is the html for one of the pages

<!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" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="liberty.css" rel="stylesheet" type="text/css"/>
<title>Liberty company links</title>
<style type="text/css">
<!--
body {
background-image: url(pattern_145_light.gif);
background-repeat: repeat;
}
-->
</style></head>


<body>

<div id="about_wrapper">

<div id="about_header">
<div id="all_page_nav_links"><img src="images_raw/other_pages_links/generic_home.jpg" width="93" height="41" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="6,6,84,35" href="index.html" alt="home" />
</map><img src="images_raw/other_pages_links/generic_about.jpg" width="106" height="41" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="rect" coords="21,6,99,34" href="about.html" alt="about" />
</map><img src="images_raw/other_pages_links/generic_links.jpg" width="107" height="41" border="0" usemap="#Map3" />
<map name="Map3" id="Map3"><area shape="rect" coords="22,6,100,37" href="links.html" alt="links" />
</map><img src="images_raw/other_pages_links/generic_contact.jpg" width="123" height="41" border="0" usemap="#Map4" />
<map name="Map4" id="Map4"><area shape="rect" coords="22,5,118,37" href="contact.html" alt="contact" />
</map></div>
</div>

<div id="links_background"> <div id="generic_top_text">
<p><strong><em>About Us</em></strong>....</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lacus metus. Nulla sed tempor neque. Nam adipiscing mauris enim, non tincidunt libero. Donec dignissim semper magna, sed venenatis elit malesuada in. Sed eget enim a erat dignissim auctor ut ut dui. Mauris scelerisque consectetur ultricies. Donec ante erat, vehicula at pretium a, dignissim non metus. </p>
<p>Vestibulum justo orci, pellentesque ut convallis vitae, varius vel libero. Nunc sodales augue at elit tempor in sollicitudin diam vestibulum. Nunc at sollicitudin nisl. Phasellus auctor bibendum venenatis. Pellentesque quis est odio. Nam accumsan, diam at pellentesque malesuada, orci erat consequat orci, in aliquet nibh mi vel urna. Morbi ac tristique enim. Mauris et nulla ac odio ornare malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lacus metus. Nulla sed tempor neque. Nam Pellentesque quis est odio. Nam accumsan, diam at pellentesque malesuada, orci erat consequat orci, in malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lacus metus. Nulla sed tempor neque. Nam Pellentesque quis est odio. Nam accumsan, diam at pellentesque malesuada, orci erat consequat orci, in malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lacus metus. Nulla sed tempor neque. Nam Pellentesque quis est odio. Nam accumsan, diam at pellentesque malesuada, orci erat consequat orci, in malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lacus metus. Nulla sed tempor neque. Nam Pellentesque quis est odio. Nam accumsan, diam at pellentesque malesuada, orci erat consequat orci, in malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lacus metus. Nulla sed tempor neque. Nam Pellentesque quis est odio. Nam accumsan, diam at pellentesque malesuada, orci erat consequat orci, in </p>
<p>malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lacus metus. Nulla sed tempor neque. Nam Pellentesque quis est odio. Nam accumsan, diam at pellentesque malesuada, orci erat conseques.</p>
</div>
</div>

</div>
</body>
</html>

coloeagle
05-29-2009, 01:40 PM
You have divs floating left and right. In order to have your footer fall below these div's you need to tell it to clear the floats.
Add clear:both; to your footer div.

silverglade
05-29-2009, 04:57 PM
AWESOME!! thank you coloeagle!! that worked great. thank you very much. derek:mrgreen::-D:mrgreen::-D

coloeagle
05-30-2009, 07:20 PM
thank you very much.
Your welcome glad to help. :-D
Did you get my PM?