CSS Forum

**silverglade** · 05-29-2009, 09:24 AM

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

Code:

@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 the page

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=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>

**LadynRed** · 05-29-2009, 09:33 AM

Derek - clear your floats.
For the footer, you can do one of 2 things. Put another div around the columns and put the footer after that, or move the footer below the </div> for #wrapper.

Oh, and remove the height on #wrapper !

**silverglade** · 01:05 PM

awesome again ladynred

. i chose the lazier of the options, hehe, i moved my footer below the wrapper and used the following code to align it.

Code:

#footer {
    width: 900px;
    text-align: center;
    color: black;
    margin: 0 auto 0 auto;
    background-color: white;
 }

i hope thats right , it did work. i tried to remove the height on my wrapper
again and when i do it doesnt show the background image. not sure why. anyway, thank you so much for helping me again, that footer issue is going to be how i treat footers for the rest of my sites. thank you VERY MUCH!!

check out my nice new footer!! it'll do i think. thanks. derek

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

**LadynRed** · 05-29-2009, 02:33 PM

Quote:

when i do it doesnt show the background image. not sure why.

Because your float is not cleared! Overflow:auto on #wrapper will fix it.

**silverglade** · 06-01-2009, 07:41 AM

here is the css i have for my wrapper. when i delete the height, the background images get cut off for some reason.

Code:

#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;
}

**LadynRed** · 06-01-2009, 09:50 AM

Sorry.. it collapses because there is no content inside the div, so you'll have to leave the height in there.